how-to-create-lead-generation-landing-page-cover-photo

*UPDATE: Since so many of you found this article interesting, we at ProteusThemes decided to save you all the hassle and created GrowthPress WordPress theme, which includes among other things, highly convertible lead generation landing page.

Have you been struggling setting up landing pages with your existing WordPress theme? Follow this simple tutorial and create your own WP landing page today!

In this tutorial, I’m going to show you how you can create a simple lead generation landing page in basically any WordPress theme using Page Builder by SiteOrigin.

Page Builder by SiteOrigin is the most popular free page builder WordPress plugin and it is in the top 20 WordPress plugins of all time, with over 1 million active installs. It’s the same page builder we are using in our WordPress themes and we have a firm belief, that it’s the best page builder solution on the market.

There are two purposes of writing this tutorial. Firstly, to show you, how you can create a lead generation landing page, even though your theme doesn’t include a pre-built layout for that, and secondly, to show you, how Page Builder by SiteOrigin is powerful yet easy to use.

What is Lead Generation Landing Page?

A landing page is a standalone web page designed for one sole purpose – turning site visitors to take a particular action. The user journey looks like this. You bring highly targeted user from paid advertising or social media to your landing page. On the landing page, you give the user something with a high value and low risk, e.g. a free e-book, so he is willing to give you his contact information in return. Later on, you contact him and try to sell him premium content or product.

In our case, this will look like this. We are going to bring the user from social media where he will click on the ad saying “Are you spending too much money on your utility bills?”. When he clicks on the ad, he will be redirected to our landing page. There we will convince him to give us his contact information, in exchange for a free e-book with energy saving tips. Later on, we will contact him and try to sell him energy saving bulbs. Because we know he wants to save money on energy.

A Good Landing Page Should Have:

  • highly targeted copy
  • high value in the form of an e-book or a newsletter
  • single clear call-to-action (CTA)
  • social proof (e.g. testimonials of satisfied customers, the number of sales)

A good landing page shouldn’t have:

  • main navigation
  • footer navigation
  • any other outgoing links
  • more than one call-to-action (CTA)

I made a quick wireframe how the landing page will look. At the top is a non-linkable logo, on the right side below is a big strong headline, representing what you will get. Under the headline are three main benefits, which you will get by downloading a book. On the left side is a form, with two input fields and CTA. On the bottom of the page, you can find a testimonial section for social proof.

wireframe-lead-generation-landing-page

Let’s Get Started

First of all, you will need to go into your WordPress Admin area and create a New Page. There are three ways to add a new page.

  • Click New in the WP admin top toolbar.
  • Go to Pages and click Add New in the sidebar.
  • Or click Add New button on top of the Pages.

After you create a new page, you will need to go to that page and hide all the default elements from it. Therefore, a visitor won’t be able to leave your site that easy. The only way to leave your landing page will be to click on the “X” in the browser tab. This is the number #1 trick when designing a landing page.

Hide All Elements of the Current WordPress Page

First of all, check, if your theme already has an available page template without a header and a footer. If you are lucky, you can skip this part of the article.

If your theme doesn’t have a page template without a header and a footer, you should make a child theme and create your own page template without a header and a footer. That would be the right way, but for the sake of simplicity, I will show you an easier way on how to hide a header and a footer.

To hide default elements like header, footer, and sidebar on your WordPress site, use CSS property display: none; for all elements, which are already shown on your newly created page.

In my case, I need to hide two header elements and two footer elements. This is the code I pasted to Additional CSS in WP Customizer (Appearance > Customise > Additional CSS).

I also needed to put the page ID in front of all the classes, so the header and footer disappear only on that particular page and not sitewide.

How Do You Find Classes of the Elements You Want to Hide?

It’s not that hard, especially if you ever saw an Inspect tool in your browser. To find the names of the classes, you will need to go to your newly created Landing page > Mouse Over the element you want to hide > Right click > Inspect, and then in dev tools, try to find the parent div of the element you want to hide.

When you find the parent div of the element you want to hide, just copy/paste the name of the class to your Customizer. In my case, that name is header__container.

*Element on the top highlights, when you mouseover the lines of the code below. *If you have troubles finding the right class, watch this short video tutorial.

How Do You Find Page ID in WordPress?

Go to WP Admin > Pages > Your landing page and you will see something like this in the URL of that page:

how to find page id in wordpress

Once again, your additional CSS should look like this where you changed the classes and the page ID with your own.

Now that we have a clean white page without anything we can start building our landing page. For a start, install the plugin called Page Builder by SiteOrigin and SiteOrigin Widgets Bundle (Plugins > Add New > Search Plugins)

Then go to your site (Pages > All Pages > Your Page) and click on the tab Page Builder.

Selecting the page builder

Then click on the button Add Widget, and choose the SiteOrigin Image widget. The new widget should appear below. We will insert our logo into this widget. To do that, you need to click on the Widget > Choose Media and choose your logo. If you haven’t uploaded your logo yet, upload it now. When you are done, click Set Media.

Since we want our logo to be centered, click on the Image Alignment and choose Center. When you are ready, click Done.

*Note: If you go to the live preview and see, that your logo is still not aligned, the reason for that could be, that your page is showing the (empty) sidebar. Try changing the page template in the right sidebar when editing the page. If you are lucky, your theme has a pre-made template without sidebar. Yes, all ProteusThemes themes have this feature included 🙂

Now It’s Time for the Hero Area.

We want to have two columns here, so we are going back to the editing page.

Click on the Add row, set a two columns row with the ratio 65% – 35% and click Insert. Now we made an empty row with two columns.

The next step is to insert the headline and three bullet points. We click on the left column, so it highlights, then we click on Add widget and then we add the widget called SiteOrigin Editor. For me, this is the most useful widget because of its flexibility.

We click on the newly created widget and start inserting the content.

*If you don’t have check icon, you can download mine. Excellent resource for icons is also IconFinder, but please check the licenses before using the icons.

Let’s Create a Lead Generation Form.

To do that, we are going to use Contact Form 7 plugin. If you don’t have it installed and activated yet, please do it now. The process of installing the Contact Form 7 plugin is the same as we did above with the Page Builder plugin.

When you have CF7 plugin installed and activated, go to WP Admin > Contact > Add New and enter the name of the contact form.

Since we will be collecting only user’s name and e-mail, your code for the form should look like this:

<label> Your Name (required)
[text* your-name] </label>
<label> Your Email (required)
[email* your-email] </label>
[submit class:btn class:btn-primary "Download FREE E-book NOW"]

Since I don’t want to have a non-styled button, I inserted two extra pre-defined classes to my button. In my case, that is class:btn and class:btn-primary. If you would like to do the same and you don’t know the name of the class of the button, I’m sure you will find it in the theme documentation.

Now go to the second tab Mail and set up all the fields you want the user to get in the confirmation mail. Here we need to include the link to the e-book or e-book itself since this will be the only reason why the user is giving us his email. When you are done, click Save at the bottom.

Then copy the shortcode that pops-up on the blue background at the top of the page. In my case, the shortcode looks like this: [ contact-form-7 id="28" title="form" ]. Then go back to edit the page and paste it in the right SiteOrigin Editor widget and click Done.

pasted-shortcode

*I highly recommend you to click Update every once in a while because you will never know when you will accidentally close the browser.

Because we want this hero area to be highly visible, we are going to change the background. You can do that by clicking the wrench icon Wrench icon at the top right corner of the two column row and then click Edit Row.

Then you need to click the Design in the right sidebar and set the background image. I’m going to use an image from author Raul Petri founded on Unsplash.

*Don’t forget to optimize your images for better performance. My colleague Marko wrote a great article about image optimization.

Because I want to have this background image full-width, I set the layout to Full Width (Layout > Row Layout > Full width).

If you go to the live preview, you will see that now you have a dark text on a dark background. To change the text color, go to the left widget with the content and click on the last icon in a row, called Toolbar Toggle.

toolbar toggle

Now you get a few more options, including text color. Select all the text and color it to white.

We want the contact form to stand out a little more, so we are going to change the background color of the left widget too. Again, click on the Widget > Design and there set the background color to white.

screenshot with white text

As you can see in the screenshot above, the spacings are not right at all. First of all, I don’t like that my form is touching the top border of the image. To change that, we should click on the wrench icon Wrench Icon of the hero row and then Edit Row. In the sidebar on the right, we click on Layout and set the paddings. I set padding on 45px 90px 45px 90px. Here is the result:

with-added-row-padding

The next thing I don’t like is the inner padding of the widget. To change that, we go to that widget, we again choose the Layout in the right sidebar and set the inner padding. I set them to 45px 60px 0px 60px.

As you can see, our landing page looks better and better. I repeat the procedure above ‘till all the paddings and spacings are as they should be.

When you are satisfied with your result and the landing’s look on a desktop, it’s time to see the mobile view.

🙏 This is the moment when it is allowed to pray a little.

If you are lucky (or if the theme author has done his job), there are only a couple of spacings broken. To fix them, go again to wrench icon Wrench Icon > Edit Row or Edit Widget > Layout and change the values of Mobile Paddings.

Adding Testimonial to Our Landing Page

Now that you know how the Page Builder works, I’m going to speed up the process in the last part, where I’m going to create a testimonial section. I’m going to add a new single row on the bottom, add a SiteOrigin Editor widget and put a photo, a quote, the testimonial itself and the name of the reviewer inside. I’m going to use pre-defined headings to get different font sizes.

If you don’t like the pre-defined font sizes, you can always add your own with inline CSS. To do that, click on Text tab on the right top corner (when you are inside the widget) and add font-size: property. Example, where I change the default h5 font-size to 28px:

Example, where I change the default h5 font-size to 28px:

<h5 style="font-size: 28px;">Lorem Ipsum dolor site</h5>

Here is the final result of our lead generation landing page:

lead generation landing page final

*Pro tip: don’t put too much time into designing the lead generation landing page. The design is just one part of a good landing page. Focus on other important things, such as copy and the actual value you give your users. Content matters the most!

Congratulations!

You made it to the end of the tutorial. Now you know how to create a simple landing page on basically every WordPress theme. I wish you many leads!

Want To Save Some Time?

If you want to recreate the landing page, but you don’t have time to make it, you can download my .json file and import layout into your Page Builder. To do that, create a New Page > click Layouts > Import/Export and then import the .json file.

*Even though you import the demo content, you will still need to install all the plugins, create a new contact form and hide the header and footer of the page.

P.S.:

Now that you have created your lead generation landing page don’t forget to make some A/B tests.

P.P.S.:

If there is something unclear, feel free to ask for help in the comment below.

Take a Look at Our WordPress Themes

Choose from a wide range of beautiful niche designs that you can try for free.

View All WordPress Themes
About the Author
It all started almost a decade ago when I got my first book about HTML. I instantly fell in love with the web, but I soon realized that with basic HTML it's not possible to provide a great user experience. So, I started to learn some advanced UI/UX techniques. Now I'm a designer way beyond just being a pixel pusher. If I'm not working, you are going to find me at the gym.