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.
Ken Mbesa, Web Design | Blender 3D Modeling
