PART 3: How to Create a High Converting Opt-In Landing Page with Elementor


– Hi and welcome back to my series on how to design and build a high-converting opt-in
landing page with Elementor. This is part three. If you haven’t seen parts one or two, go and watch those now. They’re at
designbuildweb.co/elementor-landing-page. If you’ve already seen
those first two videos, you know the drill. We built the basic landing page. Super optimised for our client,
the Green Building Company. Then we’ve enhanced it
and polished the design with some cool, more
advanced Elementor tricks. We took the design up a few notches. All great so far. But the actual job of this page is to capture email addresses, new leads, and for that we need an opt-in form and a thanks page people
will see after they opt in, and that’s what we’ll tackle
in part three here today. Let’s see what we’ll end up with. And if you’re wondering, we could just put the form directly on the page itself here, yes. But we’re gonna have
it in a popup instead, a two-stage process. Why the form in a popup? Well, there are two main reasons, really. One, if the form was
just there on the page, the message we’re giving
is kinda take, take, take. It’s we want to take your email address, and that’s not a positive
first impression. But with only the button on the page, the message is more give, give, give. We’re freely giving something
of value to the visitor. They’re more likely to say yes. And two, there’s the power
of micro-commitments, a bit of sales psychology. If we can get someone to say yes once to something really small, they’re more likely to say yes again when we ask them for something more. So we get a small yes from
them when they click a button, and then we’re more likely
to get a yes from them to fill in the form itself. That’s the idea, anyway. I’ve tested it both ways and the popup definitely works for me. Now there are a tonne of
different lead capture methods, plugins and apps, some free, some paid. Some are all-in-one. There are far too many to cover. So I’ll be showing you what I do. You don’t need a paid service to do this. It can all be free. Let’s get on with it. And this is maybe not the order that you do this in real life, but it’s the clearest
way for me to explain it. You can do it in any
order you like, really. So firstly, I’m gonna start at the end and make the thanks page first, just so we have it ready when we need it. We’ll then make the popup itself. It’ll be blank at this stage, no content inside it. We’ll then assign the popup
to the button on our page just to make sure that that
important bit actually works. We’ll then add the text content that appears inside the popup but not the form yet. I’m gonna leave the
important bit till last. We’ll be using Elementor to design the entire inside of the popup. I’ll help you choose
an opt-in form solution to suit your own situation. We’ll add that form into the popup. We’ll hook up the thanks page that we made right at the start, and finally test it all
out to see if it works. Fingers crossed. Well, we’d best get on with it. Here’s the thanks page
they’ll see after opting in. Thanks pages are a really
important part of a sales funnel, and so many people miss them entirely, which is a bit mistake. And there are loads of reasons
why your new subscribers should always see a
well-optimized thanks page after they’ve opted in, but one of the main
ones is this the moment they’ve already just said yes. They’re primed and ready to say yes again. So it’s a big opportunity to
push a relationship further. Now here, I’m just asking
for a social share, which is a fairly low-key ask, but there are lots of things
we could ask the subscriber to do here instead, like register for a webinar, for example. Notice the site navigation’s back. We’re more than happy for them to explore the rest of our site now. Quickly over to Edit this with Elementor. This is just a basic two-column section with heading widget,
text, and image widget. It’s as simple as it gets. This header section at the top, it has this image here as a background. Now that’s on the column
itself set centre right. I’ll set you this template plus the two landing page templates we made in the first two videos plus a conversion optimization
cheatsheet for the page and a bonus video on how all of this fits into a wider sales funnel. Head over to
designbuildweb.co/elementor-landing-page and hit the big pink button and I’ll send you the bonuses. Okay, thanks page done. It’s ready for when we need it at the end. Now to make the popup and attach it to our CTA button. CTA stands for call to action. We’ll put the content and the form in it afterwards. It’s just clearer for
me to show you that way. You could definitely add
the form and the content and then attach the popup to the button. Whatever works for you. For the popup itself, I use the Popup Maker plugin. It’s rock solid and has a tonne of options for display and targeting and triggering, and it’s free, and you can’t argue with that. I’ve already installed Popup Maker. By the way, make sure you pick this one, not this one with the rocket logo. I dunno, it might be fantastic, but it is not the one we’re using here. So in Popup Maker’s menu, Add Popup. The first field is for
our future reference only, just so we know what this
popup is in the future. Let’s have LM 5 Questions PDF. LM is just short for Lead Magnet. The next field is for the title that appears inside the popup. I’m gonna leave this blank. You’ll see why in a moment. In fact, I’m gonna leave all
the popup content here blank just for now. Down to the popup settings. Triggers. We’re not actually setting
any automatic triggers to open the popup. We’re manually opening it with our button. So we ignore this. Targeting. As it says here, by default, the code for this popup will be loaded on every page of the site for everyone, but we only need the code for this popup on our landing page. No point in loading it
on all pages, is there? So we just need to choose
the landing page here. So under Pages Selected, and just start to type the
name of the landing page. You can set all kinds of
very fancy conditions here, but this is all we need. Display. Popup Maker comes with some preset styles packaged as themes. I’m going to choose Light Box. I like that one best. We’re gonna edit that Light Box theme a little bit in a moment, but I’m gonna carry on editing
this popup for a second. On to size. I’ll leave it at medium, 60% of the available width of the screen, although on small screens, it automatically stretches to 100% anyway, which is what we want. Max width, I’m gonna set that at 700 pixels. It doesn’t ever need to
be any wider than that. Click to save the popup. That’s the popup itself created. I also wanna tweak a small bit of styling on the Light Box popup theme we chose, so into Popup Themes, we use Light Box to edit that. You can change all sorts of styles for the popup here in the
Light Box theme settings. These settings will affect every popup that uses this Light Box theme in future, so you only have to do this bit once. And what I’m interested in is here. Here’s the padding. That stays inside the popup, and it’s currently set to 18
pixels all the way around. I’m gonna set that to zero. Why no space inside the popup? Well, because we’re going
to be using Elementor to design the entire inside of the popup for maximum design control. You’ll see how we do it shortly. But setting zero spacing inside the popup gives Elementor the full canvas
of the popup to play with. Okay, save the theme styles. We have a popup. Now to assign it to our CTA
button on the landing page so it appears when we click it. To do that, we come back to our main menu. So click All Popups in the menu and that views the list of popups. There’s only one so far. Under CSS Classes for this popup, highlight and copy the
first class in the list, the one with the number. Now it actually doesn’t matter if you choose the one with the number or the one with the title, but not both. So that CSS class for this popup is now copied to my clipboard. Now to add it to the CTA
button widget settings. So we edit the landing
page again with Elementor and click the button widget, and we want in settings
Advanced and CSS Classes. And just paste the CSS class
that you just copied in there. Save the page again. Let’s check to see if
this popup actually works. So we’ll preview the
page in a separate tab. Click Preview at the bottom. And yes, it does. Okay, there’s no content
in it at the moment, so it’s as flat as a pancake. But if we’d missed a step, nothing would pop up at all. It’s definitely working. Now we need to create the popup content, the content that’s
inside the popup itself. You could type directly
into the popup content box, but let’s use Elementor
for the entire popup. That just gives us total,
easy control over the design. Yes, you can do this with
the free version of Elementor or Elementor Pro. So to do this, we need to create an Elementor template. Go down to Elementor, My Templates. I’ll create a new page template. Confusingly, it’s a page template, but we’re not actually
creating an entire page here, just part of one. I’ll call it POPUP – LM 5 Questions PDF. Just a naming convention
that makes finding it in the templates list easier later on. First job, in settings
down at the bottom left, I’m gonna change the page
layout to Elementor Canvas. We just don’t want all
this stuff from our theme inside our popup. Now I’m gonna drag in a heading widget and a text widget now, and I’ll fast forward for speed. So here it is. Now the form will go here
when we make it in a moment. The text just tells people
that they’re subscribing and exactly what for, and also a link to our privacy policy, which is very important. Of course the text is a
bit crushed to the sides, and when this template
is inside our popup, I want there to be more
breathing room than this, more padding. So in the section itself, I’ll add a good amount of
padding all the way around the inside of this template. Okay, inner content for the popup done. Now let’s add this template
into the popup itself. To do that, we need to grab
this template’s shortcode. So I’ll come out of here and exit to dashboard and then into My Templates. So here’s the popup content
template we’ve just created. I have Elementor Pro installed, so the shortcode is just here. Really easy. I just copy it and then come over to my popup and paste it into the popup
content field and update. If you don’t have Elementor Pro, well, you don’t have the easy shortcodes. No worries. Just instal the free
AnyWhere Elementor plugin. It’s this one here. There is a paid version
of this available, too. It’s called AnyWhere Elementor Pro. But you don’t need that for this purpose. Once it’s installed, you grab this shortcode instead and you replace these Xs with the ID number of the
template we just created. To find that, well, the easiest way, if we come back to the template library, click into the template, and then in the address bar in the URL where it says post equals, that’s the number. So just to show you, I’ll add this one to the popup, as well. So I paste it in and then replace with the
number from the address bar. Now of course in real life, you only need one of these shortcodes, either the Elementor Pro version or the free AnyWhere Elementor version. So I’ll get rid of this one now. Let’s test that. We’ll come back to our landing page. Click the button. And there we go. So there’s our popup, and it appears because we added its class to the button on the page, and the content inside it is the Elementor popup content template we made
pulled in with a shortcode. All good. But we’re missing something important, the opt-in form. Now your choice of opt-in form depends on a few things like your budget and which email marketing
provider you’re using. Well, there are far too many options to cover them all in depth here, but there are broadly three main choices, and I’ll do my best to
outline those here for you. I’ve gotta say, some people do get a bit upset when I don’t cover their
exact situation in detail. Please don’t be angry. Firstly, if you have Elementor Pro, you can use the built-in form widget. Add the form, that’s it. Now it’s perfect for this. You have full, easy control
over the form design and it directly integrates
with a lot of the most popular email marketing providers
like MailChimp, Drip, ActiveCampaign,
GetResponse, and ConvertKit. Now it’s easy to set up and have it send new leads
to your email service. The second option, well, all the email marketing platforms provide embed code for
their sign-up forms. You would just copy the code and paste it into the popup. Now there are no integration
worries with this method. The form directly talks to
your email marketing provider, and sometimes you can only
get certain functionality if you use their own embed code, like tracking the user’s
location, for example, if that’s important to you. But usually you don’t have much control over the form design unless
you know a bit of CSS, but often the forms look
pretty good out of the box. It’s worth a try. And the third option, you can use a separate
WordPress form plugin. There are loads of them to choose from. I really like Caldera. It’s simple, it’s powerful, and it’s likely free for what you need, although there is a paid
version for more functionality. You usually just create the form and then grab the shortcode for it and pop that into your popup. It’s really easy. Sometimes these plugins will
have direct integrations with your particular email provider and sometimes not, but even if it doesn’t, we’ll fix that in the
part four video next. And there are of course WordPress plugins that handle all of this
lead capture for you like Convert Pro, for example, which is a great paid plugin, and there are a tonne
of other form builders and lead capture services that have nothing to do with WordPress that you can still use, but like I say, way too many choices
to cover in this video and we need to press on. But you should have enough there to go on, and hopefully after that
you’re not too angry at me. Right, we’re back in the
Elementor Popup Content template. I have Elementor Pro, so I’m gonna use their form widget here. Again, if you don’t have pro, either paste in your email provider’s form embed code here instead or use a free form builder
plugin like Caldera and paste their shortcode in here. If it’s a shortcode, drag in the shortcode
widget and paste it in. If it’s HTML, we’ll just use the HTML widget instead. Oh, and by the way, I’ll be setting the Elementor form to redirect to the thanks page. There’ll be instructions on how to do that for other form providers
just after this section. Okay, I’ll drag the form widget in. Ideally we want the
fewest possible fields. The less we ask people to fill in, the higher the conversion rate, meaning the more likely
they are to opt in. So we can get rid of the message field. There are good arguments for and against asking for first name on a form like this. Personally, I like it. I like greeting my subscribers by name. Maybe it puts some people off. I’m okay with that. But the only way to really
know what works for you is to test both. I’ll click into Name. I’ll change the label and the placeholder to Your First Name. Do not make this a required field. If someone doesn’t want
to give their name, they don’t have to. And edit the email field. I’ll change both label and
placeholder to Your Email. And yes, email address is required. No point otherwise. Input size can be medium. Let’s now hide the actual labels so visitors can’t see them but they’re still there
in the underlying code, which is important for accessibility. Submit button. I’ll use the same text as
on the main page button so it’s all consistent
all the way through, but I’ll add a Yes! to
it just to make it feel like the transaction has moved on a bit. A bit of positive affirmation. I’ll make that button medium, too. Buttons don’t have to stand
out as much in the popup because they’re not competing with the rest of the landing page. Under Actions After Submit, here’s where you tell Elementor what you want to happen when
someone submits the form. First we’ll remove the default email tag. That’s what’s showing the
email settings panel here. This is all great if
this was a contact form on a contact us page, but this isn’t one of those. Then in Add Action, notice we have several
email providers in this list we could choose to send
this form submission to, but we’ll be covering that in part four, and that’ll show you what to do if you don’t use Elementor Pro or your form provider
doesn’t directly integrate with your email marketing service, so I’m gonna skip all that for now. What we do want here right
now, though, is redirect. When this form submits, we want it to redirect to our thanks page. I’ll choose Redirect. Under it, a new panel opens, so we paste in the full
URL of our thanks page. To grab that, you just visit the thanks
page in your browser and grab the URL from the address bar. And I’ll update this
popup content template. You might be wondering, how do you redirect to your thanks page if you’re not using Elementor Pro? Well, if you just pasted in your email provider’s embed code, you set the thanks page
in their control panel where you set up the form. As an example, here’s mine in Drip. And if you’re using a
WordPress form plugin, well, you set the redirect page in the settings for the
form that you created. So here’s an example in Caldera. The moment of truth. Let’s test this. Now back to our landing page. Click the button, fill in the form, and hit Submit. And there’s our thanks page. Brilliant. We now need to send the
captured email addresses over to our email marketing provider, so next in part four, the final part of this series, we’ll integrate the opt-in
form with our email provider, whether your choice of form has a built-in integration or not. The link to part four is below this video. And don’t forget your three bonuses to get better results
from all of this faster. Grab those from
designbuildweb.co/elementor-landing-page. If you found this video
useful, do me a favour. Subscribe to my channel, give me a like below, and leave me a comment. I love to read your feedback. It makes all of this worthwhile. Now head over to part four for the final instalment of this series. Link below. I’ll see you soon.

60 thoughts on “PART 3: How to Create a High Converting Opt-In Landing Page with Elementor

  1. Great video series Thanks alot . i have some question . how to hide thanks pages in search engins and 2nd question is can we need legal pages links inside our landing pages? and why these pages are important?

  2. Great video, I always had trouble with all the settings in popup maker but you made it really easy with just a couple of tweaks. How come you chose Page for the template instead of Section? If you choose Section, I think that's automatically a "canvas" like layout since it's just a section to be used within a page right? Curious about that..

  3. This is very helpful, I tried to use one of the free form plug-ins and it didn't seem to format the form very well. I think I will try the Elementor Pro version so the forms are included. Again, thank you for such a complete tutorial, I will let you know how it works.

  4. Thank you very much Dave! This is actually advanced stuff here – but you make it feel super easy basic because of your great way of delivering the information.
    Thank you so much and keep up the good work!

  5. Hey Dave great videos. Let me ask you somethind, 🔴why can't I see the menu when I create a page "thanks page" with elementor🔴, I want that people can see de menu and see other pages in my web!

  6. Awesome series but for the life of me I cannot get the pop up work from the register button! any one have any ideas? I have followed the 3rd vid about 5 times now.
    Cheers

  7. Thank you once again for this tutorial. I'm done setting up my opt in page and now I'm trying to put the pop in button. I followed all your instructions but somehow the pop up box does not appear in my page. I did it several times but was not successful. What have i missed? Thanks

  8. Hi, Dave. I came up with trouble, my popup doesn't show up!!! I thought first it's because my popup blocker, but it's not. I tested with another browser and mobile too. Please help me! What should I do?

  9. How do you create a 2-step optin form with elementor? I can create a modal popup, but cannot figure out how to put an OPTIN form in it. It's very frustrating. Like right here on your page, when I click the pink button, a pop up box shows with an optin form. This is what i am trying to do in elementor and cannot figure it out. And by the way there are NO youtube videos showing how to do this, so you would be the first. Please help us!! Thank you!

  10. I have been googling "elementor 2 step optin" and "elementor popup optin box" and every thing else I can think of to try to figure this out, and there are NO VIDEOS ABOUT THIS. You should do a video JUST on "2 step optin with elementor" I promise you you will get tons of traffic.. or once I figure it out maybe I will do it, since not even brainforce has any videos on this! (their video is just about the freaking popup, not the optin form, which is impossible to figure out how to get in the box)

  11. thanks a lot Dave for this awesome series! i have one issue with the popup maker – its working fine on PC, but on my android when i press the button it doesnt show up ?? do you have any suggestion fr this issue?? thanks much!

  12. hi! do you have any alternatives on the opt in form if you dont have elementor pro? what i mean to say is: the name and email form along with the button…i dont get what youre saying about it on this video..i just cant seem to follow and dont want to go pro just yet..somethings not right with elementor especially the responsive option from desktop to tablet then tablet to mobile…would love to know any alternatives so that i can save instead of going to pro

  13. Very good Dave, thanks. Since this is so worthwhile you may want to consider updating the pop-up creation part to utilize Elementor's new pop-up features.

  14. Great info thanks Dave. Just what I've been needing. Do you advise using a separate domain for the landing page or should I just make it a sub domain from my main site? Thanks again.

  15. Hi! I' ve already upgraded to Elementor Pro and for the opt in name and email forms..where do i find that widget in elementor pro? i dont see any built in form widget on the widgets section..please help.thanks!

  16. Thanks Dave! This has been extremely helpful!
    Up until the point where anywhere elementor/anywhere elementary pro is not compatible with WordPress anymore… 🙁 it’s not really your fault though.
    Do u have any other alternatives for that pop up form?

  17. Hi Dave, great tutorial, thank you ever so much…!!!

    I am having an issue…everything was going fine up until I had to create the shortcode and embed it in the pop-up form. Unfortunately it's not working 🙁 I've gone back and wathced the video numerous times and I can't figure out what's goiing wrong…I've installed Anywhere Elementor, as per your instructions, copied and pasted the shortcode (grabbed the number from my url), done everything as you instrcted, but when I click the CTA button nothing happens, I only see the line of the pop-up form, just the black line…Can you help a poor fella? 🙂

  18. Just in case anyone is having issues with the pop-up after entering the shortcode, ensure you copied the correct ID.

    I too thought that ID is just 3 digit number (as can be seen in this video) but it isn't.

    In my case it was 4 digit number. So carefully observe the ID and copy paste is correctly.

    I updated the shortcode with 4 digit ID and the pop-up works just fine now.

    Hope it helps.

  19. Hello Dave this series is very helpfull. I ran in to 1 problem. The popup doesn't open on mobile and i don't know what i am doing wrong? Could you be so kind to help out? www.novafit.nl/4-full-body-oefeningen/

  20. Hi Dave,

    I imported your templates and customised them but i have a problem with changing the permalink.

    How can I change the permalink of the edited elementor template?

  21. Hi Dave, do you still need this pop up from if you don’t have elementor pro and want to just use getresponse. How will this work, as I see you will need to create a new form in getresponse. Kindly guide. Thanks

  22. Hey Dave, thanks for this great video coarse you put together, I have a question, how do you link a drip form to be triggered by a button on the WordPress site, which allows the popup to open once the button is clicked?

  23. Hi dave you videos are so helpful.. but i have a problem beacause under my elementor plugin there is no "My Templates" im ysing the free one.

  24. You describe in your video that if you don't have the pro version of elementer grab the embed code from your email providers site, and paste it into the pop up, but nothing happens, am I pasting it in the wrong place. right underneath the [insert_elementor id=…] is that correct, or should i place it somewhere else??? Love you videos, but this was my one question

  25. When i insert shortcode , its showing shortcode on form. Not showing the contenct , i have check short code several time but still its showing only shortcode on popup form , pls help

Leave a Reply

Your email address will not be published. Required fields are marked *