- Hi, in this four-part video series, I'm gonna show you how to design and build a high-converting opt-in
landing page for a lead magnet, using WordPress and Elementor, the web design tools you use every day. So across this four-part series, we'll be building the basic page, enhancing it with some advanced
Elementor design tricks, adding the popup, the
form, the thanks page, and hooking it all up
to your email provider. And if you really want
to get results faster for your business from this, I also have some valuable
bonus content for you that you will not want to miss out on. Stick around, I'll tell you
more about that shortly. I'm Dave Foy from Design Build
Web, and we have lots to do. Let's crack on. So, in this video, I'll firstly give you a quick bit of background to exactly why we're building this page, how
it fits into the big picture, and who we're building it for. I'll share the tools you'll
need to pull all this off, it's a very short list, and then, we'll build the basic
landing page using Elementor. And then, in part two, next, we'll seriously enhance the design, and pull out some much more
advanced Elementor design moves. But hey, let's not get ahead of ourselves. So we're building this landing page for The Green Building Company. And yep, I made them up. My fictitious client builds
green, eco-friendly homes for customers who have two main goals, they want to save money, and
they want to save the planet. Now, as one part of the company's carefully planned sales funnel, they're giving away a
freebie, a lead magnet. It's a simple but valuable PDF checklist, and it gives their potential customers a nice, quick, easy win. It's perfect for the stage that their prospects are at right now, near the start of the sales funnel. In exchange for the lead magnet,
The Green Building Company get the prospect's email address, and that triggers off an
automated email sequence, which nurtures the new lead
into a paying customer. So this one page is a
vitally important piece of the entire sales funnel. Here are the tools we'll need. Now, I'm assuming you
have a WordPress site to build this landing page on. Every WordPress site
needs a theme installed, but for our purposes here, the
theme doesn't really matter, as long as it works with Elementor. I happen to be using
GeneratePress in this series, but I can also highly
recommend Astra, too. I'm assuming you have at
least the free version of the Elementor page builder, though you can use Elementor
Pro if you have it, which is well worth it. I'll cover both free
and Pro in this series. If you have your opt-in form in a popup, and I highly recommend you do, then you'll need a free popup plugin. I love Popup Maker for
all sorts of reasons, and I'll be using that in this series. And you'll need an account with an email marketing provider. If you don't have an email
marketing provider already, well, Mailchimp is very
popular and tempting because the price is very attractive. But I gotta say, it's very limited. I don't recommend it for
any serious sales funnel. I'd strongly suggest you
check out more modern email automation
platforms like ConvertKit, ActiveCampaign, or Drip. I've gotta say, I personally
love Drip, (laughs) it's the engine behind my entire business. It's just incredible. All right, let's build
the basic landing page. Here's what version one
is going to look like before we enhance the design further in the more advanced part two. This page has one purpose, get the visitor to opt in
and give their email address. That's it. Every single word and pixel on this page is optimised to do just that. This is going to be a standalone page. None of the site's usual
navigation menu there to distract the reader from the one
thing we want them to do. So we'll be choosing the Elementor canvas template to make this page, and that's just a totally
blank canvas for us to work on, we have full control. Just before we dive into
making the page, let me quickly tell you about some extra
bonus content I've got for you, to help you really get the
most out of this series, and get better, faster results. Number one, I'll give
you the three finished and mobile-optimized Elementor templates we build in this series, and you can import those
into your own projects. Number two, the page will be built, and is not just a pretty page. So I'll give you a conversion
optimization cheat sheet showing you exactly why
every element on the page is written and designed the way it is, for maximum conversion and performance. Plus a bonus extra video showing you how this one lead magnet landing page fits into the bigger picture
of your entire sales funnel, so that you can convert
the largest possible amount of your traffic into
loyal paying customers. To get those three bonuses, hop over to
designbuildweb.co/elementor-landing-page/. The link's under this video. On that page, click the big pink button under the video and pop
in your email address and I'll send you the bonuses right away. Right, let's get on and make the page. I've already created a new
page, given it a title, I've set the Elementor Canvas template. I'll save those changes first, and then hit edit with Elementor. Now, if you've not used Elementor before, it's pretty simple. On the left are the widgets,
which is all the content and functionality we can add to our page. And on the right is the canvas,
where we build our page. Let's start with a basic header. It's just a site logo. We'll click the plus icon
to add our first section. Elementor pages are built up in sections. You can think of them as
rows, if that's easier. We only need one column. So here's the outline of
our empty section in blue. Sections always stretch the full width, but it has a column inside. Just one, because that's what we chose. Now to drag in the logo image. So I'll go up to the widget chooser menu, and here's the image
widget, and I'll drag it in. I'll find the logo image
in the media library. I already uploaded all
our images for speed, and I'll set the alignment left. This is okay so far, I want
there to be a bit of space in around this image
for some breathing room, so I'll add some padding
on the section itself. So you click the section in the middle, section settings appear here, and we set padding in the advanced tab. Always remember, padding
is spacing inside things, margins are spacing on the outside. I'll unlink the padding values, I don't want them all the same number. I'm gonna go with 20
pixels top and bottom, and 30 pixels left and right. Now, I always add approximately 30 pixels to the left and right of
every section I create. Why is that? Well, because if we don't add some spacing to the left and right of sections, on smaller mobile screens, the content will be crushed
up flush to the edges. So adding that padding provides some breathing room on smaller screens. And we'll do that to
every section that we add to this page, if I remember, that is. Let's see. Next, the main opt-in offer area. This next section has a dark background so it really stands out against the page. We want all attention on this section. Notice it has a main
attention-grabbing headline and some supporting text under it. There's actually also a pre-header here reinforcing the offer. There's an image of the
lead magnet PDF itself and the all-important
call to action button. Now, each and every one of these elements is written and designed and positioned exactly like this, for very
specific reasons for conversion, which I explain in the
bonus content I mentioned, so don't forget to grab yours. Let's get this section set up. I'll create a new section, and this time we want
to choose two columns. Over to the widget menu again. I'm gonna start dragging in the two heading widgets that we need, the text editor widget for the paragraph, the button widget, and the image widget. I'll fast forward the video a little bit now, just so you don't have to watch me dragging widgets around,
it's not very exciting. Right, so here's what I have so far. I made the first heading
a standard paragraph tag, actually, in the heading settings. I often use a heading widget, even if I don't set it as a heading tag. Now, this headline underneath
is the main headline. Vitally important, so I set
that one as H one, heading one. I'll come back to styling
them more shortly. Let's add the dark background
colour to the section. So into the section settings,
and then into style, and I'll choose my background colour. And, of course, you
can't read my text now. I could choose each widget in the section and set the text colour to white in each widget's settings, which is fine. But, actually, easier and quicker, I can set them all at once
in the section settings. So in style, down to typography, I'll set heading colour to white. I'll set text colour to white as well. Et voila, nice and easy. I fancy tackling that call
to action button first, crucial for the performance of this page. So I click into it, and the
button settings appear here. I'll make it large. I'll set it to full width of the column, it needs to be unmissable. And the text can be,
send me my free guide. And then in style, I'll
set the button colour. And you'll see why that particular text and colour in the bonus cheat sheet. And in typography, we'll
have the text uppercase too. Now to the sizing of the
headings and the paragraph. I'm just gonna click into each one and adjust the size and
colour in the style tab with text colour and
the typography settings. So the free download text is green. In typography, we'll go uppercase. And in letter spacing at the bottom, let's just spread the spacing
of the letters out a bit. Then the main headline, so in style and typography, I'll bump that font size right up. It's okay, it looks a little bit crushed, I think it needs a little bit
more line height, or leading. So I'll set that at 1.2, down here. That's better, now we'll have
the paragraph text bigger as well in this section,
so go to the style tab of the text editor widget,
and into typography. All good so far. Now, let's make the slanted line to give this design a
bit more visual interest. It draws the eye, and it
makes the image overlap it, so it guides the reader
further down the page. We'll add that by editing
this main section again. And it's down to shape divider. And we want the shape at
the bottom of the section. And the shape we want is tilt. Let's flip it, so it's at the
other side, where we want it. And I'll set the height at 195. Not bad. Now, this text up at the top here is way too crushed at
the top of the section. We need to add some padding. Padding is space inside
the section, remember? So section settings,
advanced, and padding. I'll unlink the values. I'll add, say, 60 pixels at the top and at the bottom as well. Ooh, and before I forget,
let's add that 30 pixels left and right padding for breathing room on smaller screens. I remembered. Mm, now, adding in 60
pixels padding at the top has pushed everything in
this section down 60 pixels, which is what you'd expect. Actually, I'd like the text
to be pushed down that much, yes, but I want the image
to stay up here instead. I think it just gives the section a bit more of a dynamic feel. So I know, I'll change
this 60 pixels top padding on the section to just 20 pixels instead. So the image is gonna be
pushed down 20 pixels, which is just enough. And then, to push the text down, well, let's instead add some
top padding on the left column, not the entire section. To do that, I'll hover over the column and click the column settings icon. And then over in advanced,
in padding, I'll unlink that, and I'll set the top padding
to 50 pixels instead. Yes, that's nice. One issue though, unlinking the padding set all this column's padding
to zero, and actually, all Elementor columns, by default, have 10 pixels padding inside them. I'd like to put that back, so I'll just set the
other values back to 10. Now, I don't like this gap
between this heading widget and the one under it, I'd like
these to be tighter together. By default, Elementor's
widgets have 20 pixels margin under them, that's 20 pixels of space in. Now, that default can be
changed, in Elementor's main settings, to affect the entire site, but 20 pixels is fine, usually. One way to change that
here is to override that on this column only. And to do that, in the column settings, and we come to widget space,
and change it to 10 pixels. And that changes the gap
under all the widgets in this column only to 10 pixels. Now, the reason there's clearly more space under this paragraph is because
my theme's default styling adds extra space under paragraphs, which is why there's more
under this text here. But I think that all
looks really good to me. Okay, at this stage, let's
give it a quick preview. I'll click the preview button. Yeah, great so far. We should really also make sure this looks good responsively
on smaller screens. Everything we've done so
far has been for desktop. Go down to responsive mode,
and I'll choose tablet. Now, on tablet-sized screens,
I'd like these in one column. So I'll click the column settings
for the left column first. Notice in column width percentage,
we have three icons here, they represent desktop,
tablet, and mobile. Now, we're in tablet here. Anything we set here
trickles down to the right, so desktop changes
affect tablet and mobile, unless you override them, tablet
changes affect mobile only, and then in mobile, you can
always override everything above it however you want. So let's go 100% width on
tablet for the left column, and do the same for the right column. Okay, now that image is enormous,
so I'll click the image, and into style. But you can see we're also editing the tablet image size here. Now, let's set that to 60% wide. And that's great. So that 60% width affects
tablet and mobile, but not desktop, above it. Now, after I've stopped recording here, I'll spend more time getting both the tablet and mobile view just right. Remember, I can send you the finished mobile-optimized Elementor
templates for all the pages I'll create in this series to
import into your own projects. I'll also send you a conversion
optimization cheat sheet, showing you exactly why the pages are written and designed the way they are. Plus, a bonus extra video
showing you how this one landing page fits into the bigger picture of a successful, optimised sales funnel. Head
over
to
designbuildweb.com/elementor-landing-page/. Click the big pink button,
and pop in your email address, and I'll send you the bonuses. Okay, back to it. The next section is all
about the value proposition, the benefits of our
freebie for the customer. Notice it's all about what
they get in the guide, but it's not a boring list of features. Every single bit of text is focused on the benefits of this PDF to the reader. It's all about what's in it for them. This is just really
simple, two column section, with a heading widget,
a text editor widget, an icon list widget here,
and the button again. Notice it's exactly the
same as the one above. Same text, same size, same colour. So back to Elementor. Add a two-column section. Now, I've remembered,
I'm gonna immediately add the 30 pixels left and right
padding to the section, plus a really good amount of
top and bottom padding too. I'm gonna go with 60 at the
top, and 100 at the bottom. Never be shy about adding
plenty of white space, be really generous with it. I'm gonna add in all
the widgets we need now, and tweak the styling slightly,
but I'll fast-forward, because I wanna keep
this video moving along. Okay, so everything's in,
apart from the button, and it's exactly the same
as this one above it, so let's just duplicate that one. To do that, we right-click the button, and here's Elementor's right-click menu, with all sorts of useful functionality. You can right-click
everything in Elementor, and see this menu. I'll choose duplicate, and
then drag the duplicate button widget where we want it, easy. And finally, for the basic,
bare-bones version of this page, we have some logos of organisations that The Green Building
Company are affiliated with. All good landing pages require
some third-party proof, something to demonstrate
trust and credibility. That could be testimonials
from the customers, and we will add some of those when we enhance the
page in part two, next. But it can also be affiliations to respected industry organisations, too. So we'll add those in here. Just notice something very important. We have this one section
with the dark background, and inside it, we have four columns, one per image, which is great. But notice we also have this heading here. Now, that heading spans
right across the top, it's in one column, actually. That's easy to achieve, we
just need nested sections. I'll show you. Back to Elementor. So first, I'll create the outer section, the parent section, the one with
the background colour on it. That has to be one column. It's the outer column that'll
hold our inner sections. I'll add the background
colour to the parent section. All the text in this section is white, so I'll set that in the sections
typography settings again, 'cause it's easier. And, don't forget, let's add the padding. So I'm gonna go 30 pixels left and right, 60 pixels top and bottom. That just creates a nice bit
of space inside the section. Now, we need to nest
two sections within it, a one-column section for the heading, and then a four-column section under it for the images and the text. If you're wondering, yep, I could just add the heading widget to
the parent's one column, but whenever I have a section
with multiple rows like this, I like to nest each row. Just make sure that the edges of each row line up consistently with the others. So to nest a section inside another, we drag in the inner section widget. The inner section widget
always gives us two columns, but we only need one
column for this first one. So I'll right-click the column
settings, and delete it. That leaves us with one column. Then I'll drag another inner
section widget underneath it, and that's nested in the
same outer section as well. Now, we do need four columns here. I could just right-click
one of the columns, and add another, and another. But instead, I'll create
one of these columns with the image and the text first. I'll get the styling right in one column, and then I'll just
duplicate that one column several times instead. It'll carry over all the styling. Okay, so I'm gonna add
in the heading widget into column one, and I'm also gonna get on with dragging in the image box widget to the first column. Image box is perfect for this, because it's an image
with text underneath. Perfect. I'll fast-forward
through me messing around with styling it right now, though, just to keep this video skipping along. Okay, so that's done. I just made one column,
set all the styling, and then duplicated that column, and then just replaced the
image and text in each case, really quick and easy. Just a couple of quick
things to attend to here, these columns are spaced a bit
too far apart for my liking. They're just spreading
out evenly across the full default Elementor content width I have in Elementor's main settings,
which I think is 1200 pixels. So let's make this outer column narrower so the columns are pulled closer together. To do that, I'll edit the outer section, and I'll override the default
content width with 900. And yep, that's better. Just beware of one thing, the
outer section has a column with 10 pixels padding all the way around, but the inner sections do too, so you've got double the padding. With nested sections like this,
I personally like to remove the outer column's padding completely, 'cause it can sometimes mess
up how nicely things line up with the rest of the page. You can do that easily by
editing the outer section, and just set its columns gap to no gap. So the outer column has no
spacing, all the column spacing is handled by the inner sections instead. And I also quickly added one
more simple one-column section, just for the copyright. I don't want the company's usual footer with all their usual links
that they have in it normally, because it might distract
the visitor from opting in. Let's have a quick preview. Yeah, and that is looking pretty sweet. So what we have here so far is the basics of our freebie lead magnet
opt-in landing page, on its own standalone page. No distractions, with every aspect written and designed for conversion, to appeal to The Green
Building Company's audience at this early stage in the sales funnel. But we have more to do. So in part two, next, we'll
enhance the page design with some more advanced
Elementor design touches. Lots of nice Elementor tricks
coming up in that lesson. The link to part two is below this video. And once again, don't forget
to grab my three bonuses for better, faster, results. Link below this video. If you like this video, do me a favour, subscribe to my channel,
give me a like, below, and leave a comment. I would love to know what you think. Okay, I'll see you in part two. Bye for now.
