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 first 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 shortlist, 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 design-build web 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 Hone, 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 the 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 a 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 a 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. The 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, is 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.