How to Create a Stunning Landing Page on WordPress in Minutes [FREE Plugin]

How to Create a Stunning Landing Page on WordPress in Minutes [FREE Plugin]


– [Instructor] Hi YouTubers,
this is Yoni for Elementor, Today I’ll show you how I created this beautiful Landing page with Elementor in under 10 minutes. Okay, I’m going to the
WordPress Dashboard. In this tutorial, I’m using
the default 2016 theme from WordPress, with the free
Child Theme that I linked to in the description. If you haven’t installed the
Elementor Page Builder yet, go to Plugins, Add New, search Elementor, and install it. Alright, next our designing. I’m getting a New Page. Let’s call it Landing Page. I set it as a Full Width
page which is included in the child theme. And let’s start with clicking on the Edit with Elementor button. Okay, the first step
is create a hero scene. This is the main thing
in our Landing Page. This include the heading,
the call to action button and our logo. So let’s start it by dragging the heading. I just paste the text
that I prepared before, here center it, this is the main heading, so I’ll increase the text to 79 pixels, which will be much more
bold to our visitors. I change it to Capitalize, and
then I will change the font to Roboto Condensed. Below it, I will add
another heading element. I will paste in the text. This will be smaller text,
so I will decrease the size to 20 pixels, change the Weight to Normal, little bit Line Height, and we finish it. Below it I will add a
call to action button, so let’s drag it. Center it, case it to extra large, and type here the text showing our next trip tour. And under Style, I will add
a little bit Border Radius, and customize a little bit of text. I’ll increase the size to 22, and change it to Uppercase, a little bit spacing between the letters, there we go. Okay, my next step is to
add a little bit touch to this section. I want to use the video background option, so I’ll go to YouTube, and copy the URL of the video. Section, Style, Background Video. Test the video. There we go, Let’s add a little bit Padding
above and below the section. So go to Advanced, Padding top, 80 pixel, bottom 80 pixels, Now I will change the
colors of the headings so I’ll go to Style, change
the white and the next one I’ll let also to white. As you can see, the text is not clear
because the video behind it, so we’ll add a little bit
background color white that will cover the video. Let’s go here, I pick dark shade of purple with opacity, now it looks swell. Now I want to add a logo. Above our text, you
can use your own image. I will use the Icon Box widget. Let’s drag it, change it to bicycle icon in the title, I’ll put our company name, this is Bike Tour, the descriptor with it. Let’s go to the Style and change the color to a light shade of purple. Copy it to the text also now we’ll change the
font to a script font, a little bit increase the text. Change it to Normal. A little bit spacing between the letters, and the final step is
to decrease the spacing between the icon and the title. Perfect. Another thing is to add a little bit space between the headings, so
I’ll use this spacer widget, just drag it, increase the
size enough, duplicate, and move it above the text. One more step is to reduce
the size of the section, so I’ll go to section
setting under Layout, I have Content Width, so I just decrease the numbers to 850, now it’s perfect. Let’s go to the next section. The next we have three main features. So I’ll add a section with three columns. Then I will drag the Image Box widget, which includes image,
title and descriptor. In image I will pick beautiful
image that I prefer before. I changed the Image Size to maximum. Spacing a little bit something like 20, and duplicate it. We have three features. And change the images. It’s all about bicycle. Let’s add a little bit
spacing between the columns of the section. So I’ll go to the section setting under Column Gap, I have few options to the weight of the gap. I will pick the wider, and a
little bit Padding above it, let’s say 40, 50 pixels. Okay, let’s continue. Our next step is to add a streak of logos. So I’ll add a new section. I’ll use the Image Carousel widget. Add Images, one, two, three,
four, five, six, seven, eight, Nokia, we don’t really want. I have here many options, I
want the slide to show five, looks well, and the
Navigation I want to change it to only Arrows. Under Style I will change
the colors of the Arrows. To gray, and I’ll change
the position to outside. And when we’re done, I’ll add a heading. Let’s place the text. Some of our companies that experienced. And I’ll change the color to gray. Perfect. To make it a little bit
bolder, I will add a Divider. Okay. I’ll change and increase
the size to a 3 pixel line, is light gray, and I will duplicate it to under the Carousel. Also, and I see that I
need a little bit spacing above the section, so I’ll
add here something for 40 pixels, it’s too much, 25, now it’s better. Okay, let’s continue to the next section. Below it, I will add a new
section with two columns. Here I’m going to put the testimonials from our happy customers. Let’s change the text. And it is from Jonas Gerber. Image, he’s a designer,
yes, he’s a designer. Align it to left, a bit Style, change the text to Italic. I think it looks well on testimonials. We’ll increase the text a little bit. Make it bolder. Let’s duplicate. I’ll change the text, it’s from Alene, this is her profile image. She is HR manager. This section also, we’ll
add a little bit Padding from the top into the bottom. And now we change the Gap also to wider. Finally, I’ll add a two column section for the call to action script. So paste the text, Enjoy
the bike ride of your life. And I’ll just duplicate
a call to action button from the first section. To this section, I will
add a colored background, which will be purple. And I will use the Min Height with 20 pixels. And I change the Content
Position to Middle. Let’s change the color to
white, as you will see there. Call to action. I will switch the preview mode, we have everything on
the right feature scene, the logos, testimonials
and the call to action for the final. I hope you’ve enjoyed this video. Stay tuned for more tutorials. Subscribe to this channel
and feel free to share it with your friends.

100 comments

  1. Hello!! Thank you for this helpful video.
    Question though, I already made two pages from HTML converted to WordPress (one landing page, and one thank you page), how do I link them to each other? Like in the landing page when the user clicks "submit," it will redirect to the thank you page?
    Hope you could help me. Thanks a lot!

  2. I am using Hesti Theme and elementor as page builder ,, but in my case to option to set video as background is not showing.

    HOw to add a video background for a specific page

  3. Great job, however you are supposed to building a landing page and it would have been also helpful to show how to get rid of the menu and page name. But thank you, very helpful

  4. It was amazing to watch you do it. Great job. But, this is supposed to be instructional. So will you please slow down?

  5. I suggest everybody to you read the FREE book by Russell Brunson (http://bit.ly/FREE-DotComSecret-Book) it will help you really understand the process of the landing page, plus how to generate traffic. 🙂

  6. Thanks! Quick question. For a landing page, I have been advised to not have a top menu navigation. Are you able to delete this for the landing page using Elementor??

    Thanks,

    Tim

  7. This is fantastic!!! A little fast but I will just go step by step – thanks for your great tutorial!

  8. Everything Nice and Pretty , but I do have two questions: 1. Does this plugin itself slow down website (I am not thinking about my landing page, only presents this plugin) 2. I only want to change my landing page so I design and upload my landing page under www.myWebsite.com but I do want also other addresses to stay as usual www.myWebsite.com/* (as usual) and of course after update of wordpress everything stays as before update so DOES it do it ?, regards,

  9. bigg issue is there , every time i am creating same thing as your video, type of replica coming just below on the same page , why it repeating twice itself whereas I am creating one only ?

  10. nice tutorial. but after creating this how you show some of the category post in the home page

  11. This plug in will not work for me. I click on "edit in Elementor" and I get an error page everytime. Am I doing something wrong?

  12. excellent video! straight to the point and very instructive! all you need to know and do explained in less than 15 min.ì

  13. Oh man, you make that look so easy. I can't wait to create mine. I am still figuring out how to drag an image into elementor. It is not working for me and just wants to open in my browser, asking me if i want to leave my page. Once I figure out how to properly size my images and have everything ready to add, I look forward to it going as smooth as you make it seem! 😀

  14. Worthless video …… I'll never get that 10 minutes back .. you promise a landing page and we get garbage

  15. Do you have to use your current WordPress domain name where you ecommerce store is or how does it work? Do you need a separate domain/hosting for every landing page?

  16. I got some issues to get to the edit section tool. When I want to go to add the video, there is no option to edit the section, somebody could help with that ?? 🙂 or do I need a paid plan to do that ??

  17. hi…can we use this to create a sales landing page for capturing email addresses of our leads? i mean can this be used as an alternative to click funnel landing page which are expensive?

  18. Thank you heaps. This was extremely helpful and straight to the point. Now I dont want to scratch my head to worry how to make my landing page pretty!

  19. Everytime I try to create a new page and then select the "edit with elementor" button it takes me to the edit page but with a theme I chose at the very beginning of set-up phase and i cant seem to just add a new page from scratch, any ideas?

  20. Hi thanks for posting this training. Just wondering if I already have a wordpress website which uses elementor, can I create an additional new landing page ? Hope this makes sense

  21. I need help! every time i try to use Elementor it just keep saying loading! need help. also im a stripper trying to make a agency if anyone wants to be my mentor!

  22. I enjoyed your video very much, and I will try to make my landing page soon with WordPress using your example. However, the video title is a bit confusing and need to be adjusted especially the part that refers to doing this in minutes. I have taken WordPress web development courses, and have created excellent websites. So, in this regard, I think that I am at least at the intermediate level with regard to website development, but many of us cannot do what you did in this video "in minutes" as the video title suggests.

  23. Great info. I was cranking right along but then I had the page I was building not save. It keeps saying 'Access Denied'. Any idea what that's about? Thanks!!!

  24. if you need more help to create a beautiful landing page made so easy that converts http://www.konker.io/services/17328?affid=7591b8 I also had to practice a few times to get my first wordpress site up years ago. Now i can put them up super fast.

  25. great info! feel free to check out a quick demo of what I use to quickly create awesome looking landing pages https://www.youtube.com/watch?v=XOsy79N2glA

  26. Yes. But how to Eliminate that awful header from twenty-sixteen on every single page?

  27. So is this the free version of elementor that he’s doing all this with, or the updated version that you pay for. I have this plugin and have not used it yet, but I definitely will be. Just wanna know if I would have to upgrade it to build my page like this

  28. This is a very well done video. I've never built a website with Elementor and I'm very new at the whole do-it-yourself website thing. After watching your video a few times I'm going to give it a try.

  29. Hello, great tutorial ! Only 1 question. – When i put video to the background, its not showing on the phone. Its working on PC, but on the phone its just a color that I set there. Thanks for any advice 🙂

  30. Does one have to have a website or just a free WordPress site and install elementor to design the landing page?

  31. Hello!! I have a problem editing the Elementor model maker, it is formidable but when you are editing the pages in the different formats, in the cell visa the margin of the blocks is shifted to the right and generates a bad aspect to navigate, I would like to know how to configure it Or what am I doing wrong? Thank you

  32. Can't add an item by dragging, what to do? I think the simple problem should fix quickly and there should be another old fashioned way to add an item by clicking add or + icon.

    For me now Elementor is not working at all!

  33. I use Elemnetor for my other sites it's amazing, just to ask I can use this and WordPress for all my funnels, pages etc?

    What I am trying to accomplish is to create my own landing pages as you have shown here. So then I should be able to easily link my "click bank affiliate links to the page" once I create it? I don't need to use click funnels right. not for click bank, if I can create my own? I want to use something I already pay for instead of spending money I don't have. Many of these companies are expensive. if I need to I can even create my own click funnel pages if needed thru WOO COMMERCE, right? But I am realizing I don't need click funnels with "click bank" just create my own page and link up and then buy traffic… is that right?

  34. I really don't believe I need "click funnels" at all to do affiliate marketing with anyone. First, these companies are so expensive and it seems like I just need to create my own landing pages which if a person has their own site already you can create pages from that. Then add your links to the images of your landing pages, if I need a gateway, WOO COMMERCE IS FREE for WordPress. Am I on the right path with this mindset? please respond, thanks!!

Leave a Reply

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