How to Make a Landing Page in WordPress Elementor 2020 | guide

hi i’m Niloy, In The Net and in this post i’m going to be showing you how to make a landing page with elementor this is where you want to be driving people so you can collect more leads and grow your sales with a landing page that’s dedicated to getting them to do exactly what you want we’re going to be creating something like this today it’s very clear very crisp.

we haven’t got any distractions in a navigation menu.

How to Make a Landing Page for WordPress

we’ve got a simple call to action button we’ve got information on the page and another call to action button nothing else and if you want to know the top secrets for designing landing pages that the world’s top companies have spent millions of dollars on researching then check out my other post because you can do them all with elementor links in the twitter below it’s going to do wonders for your conversions so let’s get to it first thing i’ll do is close out of here.

and close out of here too we’re going to head on back to the wordpress dashboard and start from scratch so from your wordpress dashboard.

come over to pages click on add new and then i called the previous one landing page so i’ll call this one cta page call to action page and let’s click on edit with elementor so the very first thing we want to do is add in our image so we’re going to click on the little plus.

click a single column layout and then under the section settings.

we want to change the content width from boxed over to full width and stretch the section we then also want to change the height you can do it to fit to screen.

i’m going to do it as a minimum height i’m going to make that.

600 pixels we then head on over to the style tab and for the background i’m simply going to make this a solid color.

so background color click on my global colors and i’m just going to choose black.

and then what i want to do is come on down to background overlay.

click on this click on the classic again and this time i’m going to choose an image so i am going to go with this one down here.

insert it on into the page and then we want to change the position over to center.

change the repeat to no repeat and the size.

to cover if you want to you can also make this a fixed attachment which means you get this sort of parallax image effect.

i however i’m going to leave this on the default setting just going to have a static image.

but, i am going to change the opacity because as you can see that’s bringing that.

dark background though i want this up quite high.

I want it around nine. It’s just dulling down the background tones just a little bit for me.

because i don’t want a lot of colors coming through from the back image in fact i really only want the green and the cranberry red here coming through as the key focus colors.

now the reason i’m doing it this way for you is because you can do this with a free version of elementor.

if you have the pro version then you can use the dedicated.

call to action widget i have a separate article on that but keep watching this anyway because there’s a lot of other things that you can do here and personally i actually prefer doing it this way than the call to action widget gives us a little bit more freedom.

so the first thing we want to do is come on up here grab a button and drag it on into the page.

now i want to align my button to center this is where you would put the link for your call to action so if you’re selling something and this is going to be your buy now button it’s going to take them through to checkout if it’s a sign up now or a download make sure that that is the link that you are putting in here.

elementor’s version 3 update that’s introduced the global settings and design system.

that gives us global fonts and colors and then i’m going to change the border radius down here to 30 because that’s curved the button.

we’ve got rid of the corners and i’m going to change the padding unlink it first change the padding to 15 20 15 and.

  1. lastly i just want to make the typography a little bit bigger so we can bring up the.

font size here maybe around 22 and i’m going to transform it so that it is capitalized and you know what let’s bold it as well.

Once we’ve done that, what we want to do is get it over to this section on the page so under the advanced tab go down to the margins and unlink them and then because I want to move the button to the left I need to change the right.

padding so i’m going to make this 550 and i’m also going to change the bottom to 70 because that’s just moved it slightly further up the page which is what i want to do once we’ve done that it’s time to add in our title text so i’m going to grab a heading bring it into the page i’m going to make this say learn to cook.

at home again i’m going to align this to the center and that means that we want to come back under the advanced tab go down to padding and give this one 550 as well.

In fact i’m just going to move the top padding to 25.

just move that back down a little bit and then we’ll head on over to style and let’s go to the global typography turn on this header that i’ve already made.

again check out my article on elementor v3 update to see how you do that link is in the twitter.

and we’re going to change our font color to white once we’ve done that. It’s just time to add some text and then we’re going to get onto the really fun stuff so bring in the text and change this over to make this.

start your 30 day free trial cancel any time backup to style align it in the center change it over to white again.

change the typography to the same header but then we’re going to click in edit it down make it 15 and then under the advanced tab you’ve guessed it we are going to change this to 550 and now i’m just going to play with the margins so we want to unlink them change the top to minus 25.

and change the bottom to around minus 15. now that we’ve done that that is our call to action created.

if we wanted we could go into the button and come under the style section you can add in a border if you want to and then that’s going to increase that there and then of course you can change the color but i don’t want that so i’m going to leave it off.

and underneath the advanced section don’t forget you also have motion effects which means that you can give this an entrance animation such as fade in.

or fade in and up and then if you’ve got the pro version you’ve also got scrolling effects and mouse effects as well but.

again i’m going to leave these off because a call to action needs to be clear and simple.

you don’t want it to be distracting so that’s perfect the way it is the next thing i want to do is change the header up here now if you are using the free version of elementor you are stuck with just the one header you’d have to go into your theme customizer from the wordpress toolbar.

so if i preview these changes this is our wordpress toolbar so we’d have to go in here in the customizer.

and change the header across your whole site but that’s a really.

a good reason to switch over to pro because what we’re going to do now is create another one.

purely for this page so let’s head over to the theme builder.

The new choice header really doesn’t matter which template that you choose here. I’m just going to go with this one we’re going to change it around here.

once it’s done this i’m going to delete this column delete that column as well and then is this text or an image that’s an image so you could upload your own image here if you wanted to let’s delete this you can also upload your site logo but i’m just going to use heading text to keep this quick and simple.

and i’m going to call this chef at home if that is a real company i am not affiliated in any way and then we’re going to go over to style and let’s choose a typography.

I went with caesar dressing seeing as I’m using a cooking example here. Caesar dressing caesar salad seemed appropriate and again we’ll change the text.

color over to that red that i’ve been using lastly under the advanced section we want to add some padding over on the left hand side around 30 pixels that’s just going to bring it out into the page a little bit.

Once we’ve done that we can hit publish but we do want to add a condition we don’t want this across the entire site we want to go single page.

and it was the cta page that we’ve just been now we can save and close and now let’s head on.

back so there we are now we have our new header and it looks great most importantly we’ve gotten rid of all of the menus so a landing page doesn’t want to be distracting for people.

the only thing you want them to be able to click is your call to action itself and of course we could stick a link on this so that they could just click back on your logo to go back to the home page but otherwise.

nothing else no distractions from here you can obviously add in what you want let’s speed this up with a template i’ll search for landing pages and i did find one to do with cookery.

this one here so we’ll click on this and insert it on into the page.

but don’t worry if you’re not a pro user and you can’t do this it doesn’t matter because.

if i get rid of these bits you can of course design your page.

using all of the basic widgets that we have here you don’t have to use the pro ones.

okay you can use things like star ratings you can advertise your testimonials and those are the most important things that you do want to be doing on a call to action page you’re telling people why they want something telling them what benefit it’s going to give them and providing social proof such as recommendations and reviews as to why they would want to go with you i do like this though because it shows us four key services so let’s just change the padding on this and i want to change the font so we’re going to click into this one change what it says pick your favorite meals from our menu.

learn to make them step by step all from the comfort of your own home and last but not least.

and enjoy delicious food for the family when we’ve done that we can change the style so again under the style tab we want to come on down find the content section and then under.

our page and twitter go over to typography and choose my header again and change the size down to around 15. i can also change the color because i don’t like that so i’ll go with this one and then when you’ve done that.

you can simply right click copy come over.

right click and paste style and that’s going to change it over on the other ones.

quickly and easily for you now that we’ve done that what i also want to do is match my button text.

up to our logo over here so again i’ll click into the button.

go over to style, come into typography and let’s change this back over to the caesar dressing it’s made it become a little bit cramped so i’m also going to change the letter spacing.

maybe around 5.5 that looks good i really like it head on down i’m going to change this text here as well.

learn to make your favorite meals easily with our online article courses and recipes yum and now again underneath the style section i’m going to change this color over to white.

change the typography i think there’s too much space here so under the settings section we’ll go to advanced yep there’s a lot of padding so maybe just 50. We’ll also change the background color again.

under style background color you can pick one.

as you normally would or go to the global colors i’ll prick the cranberry again.

and let’s get rid of this section here don’t want to grab another button and drag it on into the page once we’ve done that we can head back up to this one.

right click copy come on down again right click paste style.

of course we can’t see it so i’m just going to edit this go into style and change that background color over to white instead of red.

and then change the text over to the red instead of the white.

and then lastly we need to come back over to the advanced section and get rid of that padding which obviously carried over from the previous one.

that we just copied up here now the widget that you see here.

this could be many things, it could be an image carousel.

let’s get rid of this though if you’re using the free version i’d suggest that you go with a basic.

gallery so if you search for basic up here that’s going to give you a basic gallery you can display.

a few images there i am going to use a media carousel though from the pro section we’re going to change this over to.

cover flow and now let’s just quickly select some images.

there we go. I like that a lot and then the last thing we did was have some counters up here so again i’m going to search for the counter widget to create a space for it to go so we’re going to press the little plus button up here.

press the plus again and i’m going to choose a three column layout for this one.

i’ve lost my widget there it is counter drag it on into the page.

i love this because of the way it makes it more interactive for people but of course this is the beauty of the landing page what widgets you use don’t really matter within reason if you want to know how to use all of the widgets whether they are free or whether they are pro i’ve got post on my channel for all of them where we actually go into detail about how you use all of these settings.

so let’s just change the color for this one over to the red again once i’ve done that i’m going to.

copy right click paste right click paste and now we just need to edit what these actually say so 100.

money back guarantee made a mistake there i wanted that over on the left let’s drag it over to the left instead.

and take that one back over there and now for the middle one make sure i’m editing that.

I am okay with recipes and.

Elementor tutorials.

i’m going to change the animation duration on this one want it to be a little bit.

slower than the other one this is in milliseconds so.

change it to that make this uh 1000 change it from a percent to a plus there we go that looks good.

last one we’re almost there so go over the content.

change this up to ten thousand again make this plus and i’m gonna change that to say.

home chefs in the baking there go cheesy little pun there for it let’s make it that and i don’t like the animation that quick.

let’s change it to 3 000 milliseconds or three seconds.

and there we go. The last thing we want to do is add a little bit more padding here so under advanced unlink this top makes it 50 bottom 50.

actually leave the top one as it was that looks good enough to me and there we go let’s save this and take a look and see what we’ve made so there we go no matter what you’re advertising whether somebody’s clicked through from something you’ve put on social media.

or in another area of your website it brings them through to our landing page we’ve got a clear.

indication for them of what we want them to do if they want to learn more they can scroll on down.

we’ve got a little bit of interest here but as i said the widgets can be anything it really doesn’t matter as long as you’re conveying.

the right message to them what’s in it for them why should they do it and make it clear what it is you want them to do that’s the whole purpose of a cta.

there’s only two buttons on this whole page they’re both going to take us to the same place.

I forgot to change what they said. I should have made it a free trial or something like that.

and then of course you can also style up your footer or get rid of it completely if you’re using the pro version you can do that with the theme builder just as we did.

for our header up here but this is the best way to do it because you don’t need to have the pro version.

in order to create something like this and if you do yes you can just use the call to action widget to do the same thing.

but i like doing it like this any questions you have.

post them on in the comments and if you want to learn the top secret tips for how to actually design a landing page that gets you more conversions.


check out my other post that i’ve done revealing them they’re things that top companies in the world have spent millions of dollars.

researching and you can do them all with elementor.

i’ve actually done a couple of them on here already but there are loads more so head on over check those out and watch as your results.

skyrocket thanks very much again for reading please follow on our twitter for more new updates.

and learn more information for a landing page from the wiki.

Leave a Comment