Elementor Workflow for Beginners (2022) - Design a Responsive e-Book Landing Page | Ken Mbesa | Skillshare
Drawer
Search

Playback Speed


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

Elementor Workflow for Beginners (2022) - Design a Responsive e-Book 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.

      Intro

      2:29

    • 2.

      Install Astra Theme

      1:31

    • 3.

      Install Elementor

      2:58

    • 4.

      Design the Hero Section

      17:33

    • 5.

      Create the Partners' Section

      5:22

    • 6.

      e-Book Topics and CTA section

      13:19

    • 7.

      Video section

      5:30

    • 8.

      Statistics counter section

      6:16

    • 9.

      About the Author section

      7:23

    • 10.

      Help Me Teach Elementor to 10,000 Students

      2:27

    • 11.

      CTA section

      4:06

    • 12.

      Sign Up Section

      9:54

    • 13.

      Smartphone Screen Responsiveness

      9:45

    • 14.

      Tablet Screen Responsiveness

      7:00

    • 15.

      Conclusion

      0:54

  • --
  • 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.

59

Students

1

Project

About This Class

Would you like to learn a beginner-friendly Elementor workflow by building a landing page? Or...

Do you have an e-Book that you'd like to sell or give out as a download?

In this class, I'll teach you a simple approach to designing any web page using the powerful Elementor plugin for WordPress without spending any money.

It's a FREE plugin, and there are no skill prerequisites, so all you need is the willingness to learn.

We'll start from scratch and build each section and column step-by-step until we have a complete landing page for your e-book.

By taking this class, you will...

  1. Understand how to create sections, and columns, add and customize text, set up widgets, and import media content to produce responsive web pages with Elementor
  2. Gain more confidence in your ability to design premium mobile-responsive web pages that you can sell on marketplaces like Envato and Creative Market

Who is this class for?

This class is for anyone who is a complete beginner to Elementor.

Meet Your Teacher

Teacher Profile Image

Ken Mbesa

Web Design | Blender 3D Modeling

Teacher

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 (Starting from 2021).

<... See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 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.

Transcripts

1. Intro: Welcome back to another awesome class with me. Can bursa. If it's your first time discovering me. Welcome. Now I've been teaching how to use Elementor right here on Skillshare for the last 1.5 years, I've shown you how to design fully working webpages. How to design awesome world-class landing pages using the free version of elementary. And today, I want to show you how to design an awesome e-book landing page that you can be proud of. So if you have an e-book or you have a friend who has an e-book and they want to provide it to the users. Maybe you want to sell the e-book or you just want to allow people to download it for free. This is a nice way to present it, as you can see right here, my background, this is the landing page will be designing. I'll be showing you how it looks shortly so you can know what to expect. So if you're new to Elementor, this will be a great opportunity for you to learn the workflow and understand how to use the different tools that Elementor provides you with to come up with a fully working web page. And if you've been using Elementor, I don't think there'll be anything new in this class for you. This class is geared more towards people who are just starting out in Elementor and people who just like to understand how to build a webpage with Elementor from scratch. So I want to show you the landing page redesigning. I'll just scroll from the top to the bottom of the page so you can see what to expect. So if you're as excited as I am, Let's go ahead and get started. All right. 2. Install Astra Theme: So here we are on my dashboard. This is a brand new installation of WordPress, and as you can see, it's 5.9.3. So your version might be different, but what we're about to do will still be relevant. So I'm just going to go ahead and get rid of this notification there. And the first thing we wanna do is installed our theme. So I'll go ahead and click appearance. By default, the active theme is 2022, because right now we're in 2022. We also have 20202021, just in case you like them and you want to use one of them. But the theme I like using in all my projects is called Astra. And so let's go ahead and install Astra. So I'll go ahead and click Add New. And here will be presented with a list of all available themes. I'll choose Astra. So click Install. Alright, it's now installed. So I'll go ahead and click Activate to make it the active theme. And as you can see now, Astra is the active theme. So let's go ahead and close this message right here. And now in the next lesson, let's go ahead and install elementor. I'll see you shortly. 3. Install Elementor: Welcome back. Let's now go ahead and install the elemental plugin that we will use to build the page in the front end. So I'll go ahead and click Plugins, Add New. And inside these plugins directory, we'll go ahead and search for Elementor. And it should be the first results right here. By Elementor.com, it has more than 5 million active installations, so I'll install it now. Let's go ahead and activate. Alright, so will be redirected to this setup wizard. Now, if you had tried to use Elementor awhile ago before they updated their plugin, you will note that we didn't have this setup wizard, but now we do. It's an easy way to help you set up the basic parts of your website. And we'll get to see that as we go through the steps. So the first step here is to sign up with Elementor, but you don't need to have an elementor account to use the plugin. So I'll go ahead and skip that. Then. Here you can go ahead and continue with the Hello theme that elemental created. They have their own team that is compatible with a plug-in. But because we've already installed Astra, we can go ahead and click Skip. Astra is a much more powerful thing. And right here we have the opportunity to give the website a name. And because I had already given it a name while I was installing WordPress, I gave it this name, my eBook page demo. But you can always go ahead and change it to any other name you want. I'll keep it. I'll keep it as my eBook page demo and click Next. And then if you have a website logo, you can add it right here. But I'm not adding the logo right now, so I'll go ahead and click Skip. Then, right here we can start to edit our page from a blank canvas with Elementor editor. Or we can browse from hundreds of templates pre-made by Elementor or import our own. So what we wanna do is click edit a blank canvas with Elementor editor because we want to build a page from scratch. And there'll be having, we can now start building our webpage from this blank slate. And that's how to install elementor the plugin. In the next lesson, Let's see how to start building the page from scratch. Now that we're here. I'll see you shortly. 4. Design the Hero Section: Welcome back. It's time now to start creating the landing page. And the first part of the page we'll be creating is the hero section. The part that comes at the top of any landing page. The part that captures the attention of the visitor or the user. And because we were redirected to this page directly after filling and finishing the setup wizard. I want to show you how to build the page from within the dashboard because I don't want to assume that you already know how to create or generate a WordPress web page from the dashboard. So I'll click this burger menu and click Exit to Dashboard. We're going to create a new page and will not use this one. So click that. And by clicking that we've been redirected to the Pages tab within the WordPress dashboard. So what we wanna do is click Add New. And by the way, this is the page we were viewing. Let me just open it so you can have a look at it. So I'll click Preview and open it in a new tab. And here it is, my eBook page demo. That's the title of the page, but as you can see, it's a draft. So what we wanna do is create our own new page that we will make our landing page. So I'll click Add New. And I'll call it Skillshare. Skillshare e-book landing page. So let me just make sure that that's in caps. And the first thing we want to do here is go inside the Astro settings and want to make sure the layout is full width, slash stretched. And for the sidebar, we don't want the sidebar, so no sidebar. Let's see These able elements. We want to disable the header and the folder. And if I can jump to this page right here, this is the folder that we've just disabled. So disable that and let me collapse that in that. Yeah, that's all. Let's go back inside the WordPress settings. These are the astral settings. Let's go back inside the WordPress settings and let's go inside template. We want to say Elementor full width. So click that. And now let's click Publish, publish it. Now. Our page is now live. So let's click edit with Elementor. Alright, so here we are. As you can see, we don't have that folder that was reading Astra on the other page that had been generated after the wizard this page. So we have a clean slate to work with. So the first thing we need to do is select a double column section by clicking this plus icon right here, a double column section. And here we have it. Let's click this plus sign to add an image element because the mentor draws its name from elements, we just drag in elements from this panel here onto the page and then customize those elements. So that's why it's called Elementor. So now that we've dragged this image in here, if I click the image, as long as it's the active element, it will be the elements we can customize here and you can tell by the name of the elementary editing. So if we go ahead and click this plus sign here again, it will show these elements. And we can go ahead and drag heading elements there. And now we can customize that heading elements and before we touch anything else, because it's the active element, you can tell by this name of the element edit heading. Notice if we click the image, it changes to edit image. That means these settings are for the image. That's just for the beginners. If you've already used Elementor, That's not new to you. So just in case while we are still here, you want to have access to those elements again. You just go ahead and click this icon. And it brings up the elements once again and we can collapse all these panels like that to, to reveal more elements that we can use. We have WooCommerce elements, WordPress elements. We have general elements. But to begin with, we will always use the basic elements. These are the most commonly used elements on any page. That's why by default, it's always open in a new Elementor page. So now that we've added the heading, we also need to add a text editor that's basically a paragraph. And it has some placeholder text. Now if we go ahead and click this image, we need to add an image of the book. So I'll go inside here to our media library. And because if not uploaded any images, we need to go inside a folder that I had prepared with all the assets will be using and you'll find the assets folder in the description below this video can go ahead and download it and use all those assets are provided for free. So let's click upload files. And if I click Select Files will be redirected to this assets folder. Assets. Inside the assets folder, we can go ahead and pick the e-book cover. So I'll double-click that. And here it is. So now that it's selected, I'll click Insert, and we have a book. Let me drag that a little bit. And what we wanna do next is add that gradient colorful background you saw in the intro demo. And how to do that is, first of all, this is the section, the whole of this area that's holding the book and that's holding these two columns is the section. And to make changes to the section, we click this part here. And now it reads Edit section to make edits to the one of the columns here, we click this part here, changes to any column. If we click this other part, it's still remains empty column because now we're editing this column. But to edit the section, we click that. And I'll go ahead and say style. Background. On normal. We need the color to be, let's say gradient. So let's click gradient. And by default, this pinkish color. So I want to add a second color, which is 1524. And there we have it, a nice, beautiful colorful gradients background. You can go ahead, of course, and make it any color you want. You can just drag this color around. But I just want to leave it at 24. And you can change this second color to whichever color you want. I can drag this around. You can also drag this to take it to the blue area and then drag it around. But I want to leave it at the original pink because I think it looks good with the orange. Click anywhere within this section to get rid of that. Now the next thing we wanna do is edit this heading because it doesn't look good right now. So let's go ahead and select it and you'll notice it's changed to edit heading. So while it's still active, I want to change it to a one because it's the main heading of this landing page. Every single webpage needs to have an H1, which is the statement that should capture people's attention. And we should tell search engines that this page is about this. So what is this about? So let's give it some tidal. Change your life today. And while it's still selected, let's go inside style. Let's give it a white color. Let's change the font by clicking typography family. Drop-down menu will appear. And let's change that to Montserrat or any font you want. Montserrat, I want to give it a font weight of 900 just to make it very bold. And then I'll increase its size up to maybe that point. And now you'll notice that it's not balanced compared to this image. So we need to push these items within this column down. So let's select this column itself. Now it's changed to edit column. I'll go to Advanced. And let's give it a top margin of 50 or maybe 70. Alright, so that's what it looks like. Let's update that. Let's go ahead and select the paragraph or the text editor. And now, once we selected, you'll notice it's changed to text editor. We first of all want to change the color to white. Next, of course, we need to change it to change the typography or font-family to Montserrat. Enter. Of course, you will need to change what this statement says. So you'll need to go inside content, highlight this, and start typing whatever you want to, whatever description you want to add there. So. Mindset, Lorem Ipsum. Let's update that. And before we go for, Let's click this preview changes icon right here to preview the changes. It will open up in a new tab. And that's how our hero section loops. And we need to add a button to allow people to download the book. So let's go back in here. And while we're still here, we can click this to expose the elements. And under the basic panel we have the button element. Let's drag and drop it there when the blue line appears here to indicate that we are ready to drop. And of course once we drop it, these changes to edit button, or you can just select it to make sure that it's Editor button. And let's go inside the text area right here and change it to download an e-book. Now, it should be down low, right? And of course, if you want to add an icon to the button, you can always click icon library. And let's look for download. Download. So let's say, let's say that now it has that icon right there. Going inside style. We can increase its padding. Padding is the spacing between the inner content and borders of the element. So let's break that link. And then for the left, Let's give it a 50. Padding. The right. A 50. Now we have some bigger spacing here. And for the top and bottom, Let's give it a 202020. That makes the button much bigger. The next thing we wanna do is add a box shadow for the button that should give it some shadow to give it a 3D effect. So once we click that, look at the button, now it has some sort of shadow behind it. And we can go ahead and edit the blurriness of the shadow. I think I liked the way it looks right now. And now, let's go inside. What we were working on was the normal loop of the button. Now, let's go inside hover and change some of those properties. On hover. Right now, it doesn't change, but on hover, if we say, we want to change the hover color of the text to black. Now when we hover, it turns black, but we also want the background color to change. So let's say we want to change it to white, like that. And while we're still under hover over animation, we have a variety of animations that we can choose from. I just want to choose grow. And that's what it does. Go ahead and experiment with the rest. Now click update that. The next thing we want to do is add a short statement right here and informing the user of the formats that the book is available in. So we can go ahead and click please elements, icon and drag a brand new texts to this area. Or let me just delete that. We can just go ahead and duplicate this text right here. So you can just go ahead and right-click, right-click this and duplicate. Then we can put this right below there. Let's go ahead and go inside style typography. And let's make this text a little bit smaller. For text style, let's say Italian. Then let's highlight it. This book is available in PDF and Kindle formats. Let's update that. And let's preview changes. Alright, and that's our hero section. And before we conclude this lesson, I just want to add some padding on the bottom and the top of this section to increase the spacing between the content and the top and bottom border. So let's go inside here and select the section settings. These changes to Section. Let's go inside advanced. Let's break this link. Because if we don't, whatever, let me just link that together. Whatever change we make on one of these cells will affect every other cell. But if we break this, we can change individual cells. So we want to change the top and bottom. Let's give it a 50. So you'll notice now we have some bigger spacing here. And if, if we change the top to 50 as well, we have some nice spacing at the top. So let's go ahead and update that. Of course, you can add as much padding as you want, doesn't necessarily have to be 50. Let's go ahead and preview the changes. And now I think it looks much more presentable. So that's our hero section. I think I'm liking it so far. You can go ahead and get more creative and see what else, what other properties you can play around with to make it much more beautiful. Of course, these colors are the ones I've chosen. You are free to choose your own colors. And that brings us to the end of this lesson. In the next lesson, Let's see how to create the partners section. I'll see you shortly. 5. Create the Partners' Section: Hi there, Welcome back. In this section, I want to show you how to create the partners logo section using the image carousel element. So without wasting any time, let's jump inside our editor. Here we are. So to add a new section, Let's go ahead and click that, Add new section icon. And we have different options for the type of section we want. We want a full width section. So go ahead and click that. In other words, it has only one column. The first thing we want to do is of course, separate this section from the hero section. So selecting the section itself to make sure that it reads Edit section. Let's go inside advanced. And let's break this link on the margin. And let's give it a 50 pixel margin. So right now there is a spacing between the two sections of 50 pixels. The next thing we wanna do is click the plus sign to add some elements inside the column. And what we wanna do is drag a heading in there. Let's call this our partners. And we want to bring it to the center. So while we're still under contents, Let's go to Alignment and push it to the center like that. And this is now a H2, in other words, a heading two. And just in case you're wondering what we mean by H1, H2, H3, H4, all the way to H6 does our HTML levels of headings, and they all serve a different purpose. So because you already have one H1 on this page and we should only have one H1 on any web page. We can have as many H2 elements as we want. The headings give hierarchy to the webpage. And that's good for SEO or search engine optimization, but I don't want to go deep into that. So, well, Partners is still selected. Let's go inside style. And let's of course change the text color. And I want to give it a dark gray that's almost black. Not pure black, but almost black. So triple 40 should give it that not so rich black color, but grayish. And then of course, let's click anywhere inside here to get rid of that. And let's click Topography to change the font family to Montserrat or any font you want. In there we have it. Next thing I wanna do is give it a weight of 800. And I think I like that size, so I want to change that. The next thing I want to do is click this icon to reveal the elements once again. And inside here, I want to search for carousel, and we have image carousel here. So basically this is a slider for images. I'll drag it and drop it as soon as that blue indicator appears. And now you'll notice the momentary drop it. The image carousel settings up here. And we can click this plus sign here to add the different logos that we want to have on the slider. So because they haven't uploaded them, I'll go inside, upload files, select files, and in the assets folder I've just told you about, you will find these partners fold, partners Logos, folder. You can go ahead and select all of them and open. Alright, so they're all uploaded. Let's create a new gallery. And there we have it. Insert gallery. And now our carousel is displaying the logos. But there are two spaced out because right now the setting is to show only three logos at a time. So if we go inside slides to show, we don't want the defaults number of slides to show, let's say five, because we have six of them. So that scrolls to show the sixth and continuous scrolling infinitely. Let's update that. And let's preview the changes. Alright, so there we have it. So I would assume that if you're selling a book, you might have some partners, may be publishers or the companies you're partnering with in that particular project. So you might want to display their logos right below the hero section. That's why we have this section. And that's how to create the partners section. In the next lesson, we'll see how to create a call to action section that has a description of what people should expect in your e-book. So let's see how to do that shortly. 6. e-Book Topics and CTA section: Welcome back. So far we've been able to create our hero section and our partners section. And of course, up to this point you notice ours winging it. We were just doing it for the style. But I thought we need to do this in a structured way, in a way that you know what to expect. So I went ahead and pulled up the page I had created in advance before I started recording this class. Just so that it can guide us on what to expect so that you know what we're about to create widget. We're not just creating the next section without you knowing how it will look. So I pulled up this page so we can be able to scroll and look at the section we're about to create. And then we go ahead and create it. This is the section we're creating. This is basically the topics that people will find in the book. And of course, remember this is a landing page. It needs to be convincing. It needs to convert people. That's the role of a landing page. It needs to convert users or visitors into buyers. And to do that, you need to give people as much of the information they need as possible. One way to give information about your book is by telling people about the different topics that you cover in the book. That's why this section is important. Going inside our e-book editor. We need to add a new section. And as you can see right here, this is a section that has three columns. But it also has this section here which is one single column. So how do we incorporate that on our page? So let's go ahead and say add new section. And we need to add a full width section that has a single column. And we can go ahead and click this icon right here and drag a new header right here, as we've done before. Or we can just go ahead and duplicate this and drag the duplicate in here. But before we do that, I want to bring up a very handy tool that I forgot to show you how to bring up, that will help speed up our work. So I'll go inside this burger menu, user preferences, editing handles, click, Yes. And now when you hover over these columns, you'll notice that we have additional settings that pop up that will help us avoid right-clicking to do, to take action. So instead of right-clicking, right-clicking base to duplicate, you can just hover over, can just hover over these and click there. And now we've duplicated that. Now we can drag this inside there. And we have a heading. Now we need to separate these two sections. So first of all, let me click that, go inside advanced, break that link and then give it a margin at the top. Now we have that spacing there. Alright, so selecting this heading, selecting this heading, Let's change it to this book covers. Give me those three dots. Of course, feel free to write whatever you want here. And of course, let's leave it at as H2 because it's a H2. And then let's go ahead and click this Elements icon and then drag a sentence right there. And while it's still selected, let's go inside style and let's align it center. Now this can be a brief description of a brief description of this section. So the section contains covered in the book and that kind of stuff. Let me just remove some of these texts. So go ahead and type whatever you want in there. Now, notice there is too much space between the two and we need them to be closer together. So while this is still selected, can go inside advanced, break the margin link there, and then we reduce the top margin, pulling them together like that. And then right below them, let's update that. First. Let's preview the changes. Right? I think it looks cool. But going back to our sample, this is bigger and it's orange in color. So let's. That we have the freedom to customize it as much as we want. So while it's still selected, I'll go inside style typography. Let's give it a 600 weight. And let's increase the size by dragging this. Maybe up to 45. Then let's go inside texts, color 1524. That's the color I chose. And then right below the heading and description, we have these three columns. So let's bring in the three columns. Clicking that element icon right there. We need to drag in an intersection. So I'll drag it and drop it as soon as the blue line appears. And now we have two columns by default. So what we need to do is click plus right there. And then we need Type icon. And what we need is an icon box. Let's drag and drop it there to see how it looks. So you'll notice that it's a box that has an icon and a heading and some description. Now let's customize it to look like this. So first things first, let's copy time management. And let's go to the title and description. Let's paste time management in there and then that's the brief description of that particular topic. And let's change the icon. In here. I'll type clock to indicate time management, which is what this section is about, which is what these tiny section is about. Then of course, let's change the styles of this icon box. So while it's still selected, let's go inside style. If I look, if I collapse the icon, you'll notice we have two panels, icon in content. So for the icon primary color, we want it to be that color. Eight Twenty-four. You can change the color on hover, maybe let's say triple 40. So on hover, it changes to that color. And then let's collapse the icon. And let's go inside the content. Of course, we have the different texts or typography options we've already seen before. We can change the color to the triple 40. And then we can go inside the topography and change the font family to Montserrat. And of course we can increase the font way to 800. And that's it. So what we need to do next is instead of repeating the same thing right here, let's go ahead and duplicate that by hovering over that column and then clicking that to duplicate it. Duplicate it one more time, and then let's delete this. Now we have three columns. And then let's duplicate this intersection by clicking this duplicate intersection icon. And there we have it. So let's update that. And let's preview the changes. Right, awesome. So now the only thing we need to do is copy these titles. I'll click this one. Paste that in there. Go back in here. Copy that leadership Winning lifestyle. So let's click that. And now let's make sure the icons are relevant to the topics they represent. So effective communication, maybe we can look for microphone. I'll insert that for the leadership. Then for the winning lifestyle, Let's go ahead and select money. Insert that. Update there. Let's review the changes. Now scrolling downwards. There we have it, this book covers, and then we have what it covers. But now notice that we have some grayish background right behind this section. So let's conclude this lesson by looking at how to do that. Of course, this color is right behind the whole section. And we also have this button right here. So I'll select the whole section, the single column section that's holding this heading, the description, and the intersections. So select that. Let's go to style, background, color. Let's drag this up to maybe point. I think I like that color. Now notice we don't have padding at the top and the bottom. So let's go ahead and click Advanced. Break that link right there, and then top padding 50 and bottom padding 50. Now we have that spacing. So to add that button you just saw on our reference image. Let's duplicate that and let's drag it. Let's drop it there. Now you'll notice it's on the left side. So while still under content, let's align it to the center. And let's add some margin at the top of the button. So while the button is still selected, Edit button, advanced, margin, top. Let's give it a 50. Update that. And now you'll notice that this drop shadow or this box shadow is too dark on the white background. Right here. It looks good because of the colorful background, but because he hates on a white background, you need to reduce the darkness. So while it's still selected, let's go inside style. Box shadow. Let's click this color icon right here. And let's reduce the richness or the opacity of the box shadow. And then update that. Let's preview the changes. And there we have it. So far, I like what we have. Next. Let's look at how to add this video section. Where when someone clicks to watch a brief story about the e-book, maybe it's a story about the author or the rider. When you click lay, there is this overlay and it brings up a video that you can watch without distractions. So let's see how to do that in the next lesson. I'll see you shortly. 7. Video section: Welcome back. So, so far we've created our hero section, our partners section, and the topics section, which has a call to action. Next, we want to see how to create this brief history about the e-book section, that is a video. So going inside our editor, of course, the next thing we need to do is add a new section. And this section has to be a full width section once again. And of course we need to add some spacing between it and the previous section. So clicking the section itself coincide advanced, break that link. 5050 pixel margin at the top. And you can tell because here it's pixels, you can change that to EMS percentage of RAM. Let's update that. And then let's click the Plus sign here to bring up the video. And before we add the video element, of course we need to add this heading here. So let me just copy that. Go inside here. And we can just go ahead and duplicate this. Our partners duplicate that. And then let's drag it. Let me get to the bottom. Scroll your mouse wheel while you're still holding that. And let's drop it in there. And while it's still selected, let's go in here and let me paste that in there. Of course you're not tasting anything because you don't have this reference page. Alright, so now that we have that there, Let's click that Elements icon again. And let's drag a video element in there. Let's drop it there immediately we do that. Notice that we have the edit video settings. Now, this is where you put the link your video on YouTube. So you will need to have a YouTube channel, then upload your video to your channel, and then grab the link that YouTube provides you with and drop it in here. Of course, you have different places you can retrieve the video from. Doesn't necessarily have to be YouTube, but I prefer YouTube because it's the most popular video website on earth. So the next thing we need to do is of course bring up that overlay. When someone clicks Play, we want it to have this dark overlay. So they only watch the video, nothing else distracting them. So let's go back in here. And before we do that, let's have a look at some of the settings we have here so you can set it to autoplay when the page loads. It just automatically starts playing, but we don't want that. So let me just stop that. We can mute it so that anytime the page is loaded, it's muted, even though it's playing. Then we can also loop it so that every time it reaches the end, it starts again automatically without any user input. And we have all these other different settings. You can go ahead and play around with them to see which one you like. Then if we collapse this video and go inside image overlay, we can enable image overlay and that means let me close that. So right now with this disabled, it will show the thumbnail that you have on YouTube. This video is on YouTube. And however it looks on YouTube is exactly how it will appear here. But if we come here and say enable image overlay, we can select an image to be the thumbnail for our video. So because they don't have that image here, I'll upload it. I had created it and you'll find it in the assets folder I provided. So let's go inside assets. E-book, video overlay image. So I'll double-click that. And I'll insert media. And now we have this nice and clean image that is presented and consistent with the branding of your page. And then to bring this effect of this dark overlay here, this is called a lightbox effect. So let's go in here and then let's check light box. So let's update that. And let's preview changes. Alright, so let's scroll downwards. And here is our video section. So if we click to play, we have that Lightbox effect. And that's how to create this video section. In the next lesson, Let's see how to create these counter right here that shows some statistics about the e-book, like number of downloads members, how many five-star reviews it has, and how many free videos that come with the purchase of the e-book. So see you shortly. 8. Statistics counter section: Welcome back. So next, we want to see how to create these counters section that shows some statistics about your e-book. So let's go inside our editor. And of course, as you've already guessed, the next thing we need to do is add a section and it has to be a full width section. So let's go ahead and click that. And of course we need to create some spacing between the two sections. So while this is still selected, I'll go inside advanced. Remove that link and then 50 at the top. And now we have that nice space. As you notice here, we have this gradient color that we had right here at the top. So that's very easy. Elementor provides us with a way to copy effects from one section to another section or one column to another column. So if I right-click this section, copy, I can go down here. Because this is also a section. I can right-click, then paste style. And it will paste the padding we put at the top and the bottom and the background color. Or we could have done that manually, which would have taken more time. So now that we have that, let's go ahead and add a intersection. This intersection needs to have a counter. So basically this is a counter. This right here is a counter multiplied by four. So click that plus sign here to bring up the elements. And then in here Let's take counter. And here it is. Let's drag it in there. Let's drag it in there. And now, as you can see, it's counted all the way to one hundred and one hundred. Here is the ending numbers. So this is the number you want it to stop at. So let's say it's been downloaded 17 thousand times. So we have that 17 there and it will start from 0 to 17. Then the number of suffix is what of course comes after the number. So 17 thousand, rather than typing 17 thousand, because that would take too long. Let's just type 17, kay? You can start from anywhere. We can also start from ten. So the next thing we need to do is edit this text here. Downloads. And of course let's change the color to white. So going inside style, white, That's the number for the title. It's also change it to white. Let's change the typography. Montserrat. So I'll click the font-family. I just loved monster wrapped. Let's update that. And now that we're satisfied with how it looks, all we need to do is duplicate it three more times. So hovering over this, I'll click that once, twice and thrice. Then let's get rid of this. But if you want to add more, of course, feel free to. So I'll click inside this second one. And then I'll change that to what did we happier members? Star reviews, freebie. So members of our website or a book club, Let's say they are three K members. Then let's go inside here and say five-star reviews. We have about 13 thousand five-star reviews. And let's say active readers. Let's say Jove gay readers or something of that sort. So let's update that and let's preview the changes. So let's scroll downwards and see what we have. There we go. So you'll notice that we need some spacing between this section and this section. So let's go back in here and select our section. Going say that vast margin, top. Let's keep it at 50. Fact, let's give it a 100. Let's update that. Let's preview the changes. Scrolling downwards. All right. Alright, so the next thing we're gonna do is work on a brief story about the author. So as you can see on our reference page, we have an image of the author and a brief story or description here, and the author's signature with some social media handles. So let's see how to create this section in our next lesson. I'll see you shortly. 9. About the Author section: So far we've created all these sections all the way to the statistics area. The next thing we want to do is create the author's bio. So going back inside our editor, as you've already guessed again, we need to add a section, but this time we're adding a double column section because this column we'll hold the image and this column will hold the text content and the icons. Of course, first of all, let's add some margin at the top, selecting the section, go inside advanced, break the link there. 50, top margin. And then let's click this plus sign here to add an image element. Dropping it in there and clicking that. We don't have the authors image here. So I love loaded from our assets folder. So book, author image. So let's open that. And let's insert media. There we have it. Next thing we want to do is, of course, add the heading. Heading, who the author. So I'll go ahead and copy that. And in here, I want to go ahead and say, drag a heading in here. But instead of doing that, why not just duplicate this? And then drag this all the way to the bottom. Now, when you're trying to drag, let me just undo that. When you're trying to drag these elements and it gets to the end here and it's no longer going downwards while you're still holding it. While you're still pressing the button on your mouse. Scroll with your middle mouse wheel. And then release the mouse button when you get to the point you want to drop. Alright, so now that we have that there, I'll click in there. While it's still selected. Let me copy that. Select all of it, and then paste. So who's the author? And now let's align it to the left. And this is a page tool. So I'll leave it at that. Let's go inside here, typography. Let's increase the size up to that point. Now we can also go back in here and duplicate this font. And I've noticed that we forgot to change these descriptions to Montserrat, so let me select that content. Let's go inside the style for the content here. Topography. Know that's the title. We want the description. Wanted to change that to Montserrat just for uniformity. And now it looks like Montserrat, so I'll just copy that. Then. Paste style in there. Paste style in there. Right-click paste style, right-click paste style, rightly know, right-click paste style. Alright, so this should also be Montserrat type typography. Montserrat or uniformity. In here. Instead of duplicating any of those texts, let's just add a new text editor element. And let's go directly inside style typography, months Iraq. Inside content, you can now write the description you want. I'll just go ahead and copy that and duplicate it a couple of times. And we have our description or our bio of the author. Mixing want to do is add their signature. Just to make the page a little bit more interesting. He doesn't really serve any other purpose apart from just making it interesting. So let's click that icon to bring up the icons, to bring up the elements. And then let's drag an image element in here. And of course you'll notice this image placeholder is large. Let's choose image. Let's go to upload files to get the signature. And you'll notice that the signature image is 100 by 40 pixels. That means it's a tiny image, so make sure your signature image is tiny. A 100 by 40 0s, nice. Don't make it 500 pixels because it will be big. So let's insert media, and there we have it. And by default it's in the middle. So let's push it to the left. And the next thing we need to do is add our social media icon. So selecting the elements there. Then social. Let's drag the social icons right there, by default there in the middle. So let's put them to the left as well. And let's add some margin between them and the signature. So while it's still selected, let's go inside advanced. Break that link. Maybe 30. Yeah, I think I like that. Hello, know how we got this here. Let me just remove it from there. And then let's update that. Let's preview the changes. Awesome. So we have the buyer of our author. It's looking nice. I hope you've been able to create it as well. In the next lesson, Let's see how to create this call to action section. Because now by this time the person is really interested in downloading the e-book. And notice that we have free download buttons on this page because a landing page needs to have a call to action sections. Sections that remind them to take an action. Because the goal of a landing page is to convert people into buyers or download as they watched the video. Look at the statistics and read about the author. Next thing we want them to take an action, so we conclude another button there. So let's see how to create this section. In the next lesson. 10. 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. 11. CTA section: Welcome back. Of course we've finished creating the authors section. Creating this section is pretty easy and straightforward. In fact, I think you already know what we need to do to create it. So let's go ahead and do that without wasting any more time. So going back inside our editor, we can generate a new section from scratch, or we can go ahead and duplicate this. And then drag it right below this. And now it has all, and now it has most of the parts we need. So let's get rid of these sections. Fact, let's get rid of the inner section entirely. And now we're left with our original single column. So what we need to do is we can duplicate that. Elementor is created to make your life easier, rather than recreating the same similar styles every time we can just duplicate it. Let's bring this to the center while it's still selected, edit heading, it's pushed into the center. Now what does it say? This book will change. So let's copy that. While this is selected, I'll click that, paste that in there. And then let's go inside style text color. We need it white. And then we have this Lorem Ipsum. We don't need to copy that because we can just get it from here. Let me duplicate that. And then let's drag that in there. Of course, let's get rid of 90% of it. Now we're left with that. Let's go inside style and let's put it in the middle. Now it's in the center. Let's change the color to white. Then let's go inside topography. And let's increase the size a little bit. Make it look like like a description. And then of course we need that button. So let's go here and duplicate this over, over that, and then click that duplicate icon. Then let's drag that. When we get here. Use the mouse wheel to scroll downwards. Let's drop it there as soon as the blue line appears. Now you'll notice we have too much spacing right here. So let's reduce that spacing. First of all, these had some padding at the top. As you can see from its, from its editor outline. Let's go to Advanced while it's still selected. Let's remove that. Then let's let select this text. Go inside advanced margin, bottom. Let's reduce the bottom margin. I think I like it there. Let's update that. So let's preview the changes. And there we have it. Our call to action is ready. The next part we want to create is this user's sign-up area because any landing page needs to have a sign-up form or whatever form that captures the customers data. And you have to give them something in order for them to give you their contacts, their email. So they get the first three chapters of the e-book by signing up to your mailing list. So let's see how to create these in the next lesson. I'll see you shortly. 12. Sign Up Section: Welcome back. So now it's time to create these sign-up form. And we'll do that by installing a plugin called terminators. So without wasting any time, let's jump inside our dashboard. So let's go to Plugins, Add New. And in here I want to type for me later. Here we go by WPA mu Dell has 300 thousand active installations right now. So Eileen, solid. Let me go ahead and activate it. So there we have it for dominators. So going to the left menu here, it's almost at the bottom. I'll go to formulate their overweight. Fact. Let me just click. Formulator will be taken to the plugins dashboard within WordPress. So as you can see, we're under formulated now. Dashboard and we have more areas we can visit, but for now, we're just interested in creating a form. So I'll go ahead and as you can see right here, we have forms. Create a form. We have posts. You can create a poll but will not go into detail on this. You can go ahead and check it out on YouTube. Learn more about why for me is the most awesome form Plug-in, the arrays. But that's just my opinion. So let's create a form and will be presented with these pre-made templates. And the one we need is newsletter sign-up we can create from a blank slate. Let's go with black. Just so we can create what we need from scratch. Let's give it a name. Sign-up form. Alright, so here we are. All right, so here we are. All we need to do is insert the field we need. And the field we need is the e-mail field. So in here, I just want to click Insert field and select the email field. We have many other different fields that you can insert into your form, but we're not interested in them for now. So let's insert field. And then, yeah, let's just leave it as e-mail address. Or let's say your e-mail, your e-mail. Let's remove a dress. And then let's leave the placeholder as John Doe. Apply that. If we preview it. Your e-mail and the placeholder is EG John, John at DOT.com. So let's close that and publish it. Once you publish it, we get the short code that we can paste in the front end. So let me copy that. And as you can see, it has been copied successfully, will need these short code, the front end. So let's go back to the front end. Here we are. Right below. Our call to action is where we're adding a new section. And it's a double column section. And we need to add a top margin. So selecting that advanced break that 15 facing here. So in here, let's click that plus sign and let's type short code, or just short. And this will appear. Let's drag the short code in that column there. And now, once we drop it there will present it with these edits short code settings. And then we can paste our short code in there. That's a short code we got from here, this short code in just in case you've left this part. You can also get it from right here from this cogwheel. Copy short code and you've copied it again. So drop it in there and then apply that. Let's preview changes. Let's scroll all the way to the bottom. And there we have it. Our form is ready. But now let's go back in here and add this text. Get the first three chapters free. So let me copy that. What we need to do is just duplicate this or let me duplicate this instead because it already has the color we need. Let's drag it all the way to the bottom. Let's drop it in there. While it's still selected. I'll paste the paste the right text in there, get the first three chapters free. Alright, let's update that and let's preview the changes. Right? But now it's not balanced. So let's pull this a little bit to the left so that these jumps to the next line to make it look more balanced. So like that. Update that. And remember we also need to make this color rhyme with the rest of the brand colors. Because this form is created with formulator, we can't edit it using Elementor. We have to go back inside our dashboard. Go back inside the dashboard. Terminator forms. And then once we're inside the forms, will see a list of all the forms we have. This is the form we create. We've just created sign-up form. Let's edit the form. And while we're inside here, Let's go to the second panel right here. Appearance. And that will take us the place where we can edit the appearance of the form. So first of all, we can get rid of these borderlines by saying selecting flat. There are other options here that you can choose from, but I like flat. And let's change the color of the button. So right now we're using the default colors of the default colors that come with a plug-in. But we can say costume. And it'll bring up all the parts of the form that we can change. The color of. The last item here is the submit button. This button. So because it's selected, it brings up, it's a drop-down menu. It brings up this options. So we can select the background color and change it to a 24. That's removed those duplicates, F 1524. And on hover, we want the button to be, want the button to be triple 40. And unfocused. We also want it to be that color. So let's go, so let's say update. Alright, now let's go to the front end and let's apply those changes that we've just made in the backend. Let's preview the changes once more. So scrolling downwards. Here's our button on hover. The changes to that black that is consistent with this black. Now we can increase the spacing between this column and this column by going back in here. Scrolling downwards to this section, this section that has this column and this column. Let's select this section itself inside layout. Columns gap, Let's say white. And let's read, let's increase this width here just so that this is in two squeezed. Let's update that. And let's preview the changes. At least we have some nice spacing between the two. So now that we're satisfied with all the sections we've created, it's time now to finish the class by making the page responsive on all devices, that means mobile screens, tablets screens, and it's already looking good on desktop. So let's work on tablet and mobile screens. I'll see you in the next lesson. 13. Smartphone Screen Responsiveness: Welcome back. Time now to make the web page responsive on the different devices that people browse on. And that's mobile screens and tablets. So let's go ahead and click this responsive mode icon right here at the footer of the page. And immediately this bar will appear with different settings for responsive design. So I'll click this icon and immediately changes to the size of a mobile screen. And we can go ahead and scroll just to see what it looks like. It doesn't seem like there's a lot of work to do. The webpage is almost looking good by the way. So starting from the very top, the book is in the middle and it looks good where it is. So let's move on to the second part, which is the H1. Selecting the H1. Let's go inside style typography. Let's reduce the size. I like that size. Going back inside contents, let's align it to the middle. And you'll notice we have the margin at the top that we had set on the desktop. Let's go ahead and select this column. Now it's edit column advanced. And let's break this link to remove the default settings that we've come with. So now we've removed the settings we set inside the desktop mode. So the next thing you'll notice here is that let's reduce the size a little bit further. Going inside typography. I like that size. Select this text editor. Go inside style. Align, center. We're just trying to align everything to the centre. For balance. Select the button inside content alignment. Let's do the same for these text editor here. Going inside style alignment, center. Our partners section already looks nice. So let's move on to the next part, which is the topics section. I think I like where it is, but one thing we can do about this whole section here is increased the padding on the column itself. So spacing between the edge of the screen and where the content starts. So let's go while this column is selected, Let's go inside advanced. Remember this column is inside the section which was a full width section. So let me just switch desktop for a second. We had a full width section with just one column. So what we're trying to do on mobile screens, Eve increase the padding around this whole column. So that means the padding, we'll also push this button inwards. Going back inside the mobile screen. While we're inside, advanced on this column. Without breaking this link. Let's give it a 20. And you'll notice now we have some spacing all around, including where the button was doing some more spacing here. Let's update that. That looks nice. I think I like this video areas, so I won't touch that. I like this part is, well, everything is automatically centered. What we might want to do is select this column, like we've done in the topic section. Select the column, go inside advanced. Let's keep it a padding of 20 all around, right, so there's that uniform padding all around. And we can push everything to the center. So I'll select this adding under contents alignment center. Select this text editor under style alignment center. Let's select this image. Elements. Alignment center. The social media icons center. The image is well-placed so we don't need to touch that. And by the way, a cool feature of Elementor is that it allows you to reverse columns within a section. So if we wanted this image to come before the texts, we can go inside advanced. First of all, we can select the section that we want to affect, which is a double column section that's holding these textblock and the image go inside advanced responsive. And we can reverse columns on mobile screen. So now the image has been pushed to the top and the textblock has been pushed to the bottom. But going back in the screen, in the desktop version, the image is still on the right, going back inside here. So if you don't want that, you can always just uncheck that. Then let's reduce this heading size. So selecting this style typography, Let's drag that until we're satisfied with the size. I think I like it at that point. Everything else is centered and looks good. Let's reduce the size of most of all. Let's reduce this like this size. First of all, let's reduce the size of the authors adding. So I'll select these heading. Style typography. That's 39. Let's make it a 40. And going down all the way to this call to action from section, select the heading, go inside style typography. Let's type in 40 right here. Like that size. Going back inside content, let's push it to the center. And our form is intact. Now we can use these responsive design settings to push this button to the center, like we've done with the rest of the buttons. Because remember this form is created with formulator. And to push this button to the center, we would need to use some CSS code. So we won't go into that. And I pink the form just looks nice the way it is. But if you want to learn more about how to push this button to the center using CSS. You can go ahead and look for a tutorial on YouTube or any other on YouTube or just googling. Look for nominator CSS customization. That's it. On mobile screens. The webpage looks awesome. Let's go inside. Alright, so let's update that first before we proceed to the tablet mode. And let's preview the changes. Of course, it will open up in tablet mode. But I want to show you how to mimic a mobile screen and see what it will look like. So on your computer keyboard, hit Control Shift I or Command Shift I. That will open up Google Developer Tools and go ahead and toggle device toolbar. When you click it. When it's active, it's blue in color. And here we have a drop-down or the different mobile screens that you can mimic to see what the web page will look like. So currently we're viewing it as a pixel five, conveyed as a, you can do it as an iPhone 12s pro. And this is how it will look on iPhones. All right, so I like how it looks. Let's go back and work on the tablet mode. 14. Tablet Screen Responsiveness: So going back in here, I want to click the tablet icon. And immediately it shifts to tablet mode. Let's scroll all the way to the top. By default, elementor has this known bug where when you switch to tablet mode, you need to expand this screen a little bit. If you apply settings on tablet mode without resizing the screen a little bit, you won't see the changes and let me prove that to you. So right now, this column, all the way to this point. So if I select the column and go to the column and give it a 100 per cent wheat to run from the left to the right and hit Enter and nothing happens. But when we pull it a little bit, now notice that it's actually showing what we've just done. And that's what I'm talking about. We want to see the settings for setting. So right now the bulk column is taken up a 100 per cent of the screen. But when we switch to the desktop mode, it's still occupying 50% of the screen. And this other part is occupying 50 per cent of the screen. Going back to tablet mode, we want to make this a 100% wide own tablet mode. Like we've done with the book. Let's expand this a little bit again. Right, so it's a 100%. So selecting this column here and going inside layout, column width a 100%. Now it's a 100%. I want to break the margin we had sets awhile on desktop here. And of course, while this is still selected, let's go inside advanced and remove that. So now we reset it. Selecting this heading. Go inside style typography. Let's reduce the size a little bit. And let's go inside content and push it to the center. Let's select this description. While under style, pushes to the center. Let's push everything to the center again. Let's push everything to the center again. Select that. Pushes the center. I like that. Style. Centre. Apartments looks good. This looks good. We can also give it that 20 margin. Under advanced. Looks good. These column needs some padding around the edges. So selecting these columns, advanced padding. Now we have some nice padding. Image. Looks good. Let's reduce the size of this heading. Style typography. Finally, let's reduce the size of the padding right here. The pink, I like it at that spot. Let's update that. And let's preview the changes. All right, so on this screen, Let's go to this drop down menu and select the iPad. And let's, we can switch between landscape and portrait. So click this icon to rotate it. That's how it looks. On tablet landscape. And on a tablet portrait. That's how it looks. To bring in to make the screen bigger and make it fill up the page. You can just make it a 100 per cent like that. And this is how it looks from a close-up distance override. So now our landing page is responsive on all screens. Because now if we switch to iPhone, he looks good. On tablet. It looks presentable. Let's go to Surface Duo. And on desktop, it looks awesome. So let me close this and scroll downwards. Basically, that's how to do it. And that marks the end of our class. I hope you learned quite a few things if you're brand new to elementor. And even if you already know how to use Elementor and you were watching this as a refresher. I hope you were able to learn one or two things. Of course we haven't covered everything there is to cover about Elementor. That will be impossible in one class. But we've covered what we needed for these specific landing page. So you just in case you want to learn more about how to use Elementor, like for example, building the navbar, how to build a folder and edit the details in the photo. You can go ahead and watch any of my other Skillshare classes where I go deep and teach you how to design fully working websites. But for now, I think we've covered everything I intended to teach you about how to build a beautiful e-book landing page using Elementor. 15. Conclusion: All right, So that marks the end of this class. I hope you found it valuable and above all, I hope you actually create your own landing page. If you're new to Elementor, I encourage you to check out all my other classes by going to my profile. And you'll find several classes there where I teach you how to design fully working websites or awesome landing pages. And if you liked this class, please don't forget to leave a review. It will go a long way in helping make this class more discoverable. Right here on Skillshare. More than reviews. The more the reviews the class gets, the more it becomes discoverable. And as always, my name is Ken visa. Until next time, stay creative piece. See you next time.