How to Create a Simple Landing Page in WordPress (+3 Examples)

Posted by Stacey Corrin on January 20, 2020

Last updated on: July 3, 2020

Do you want to create a landing page in WordPress?

Landing pages are a great way to capture the attention of your website visitors and helps turn them into leads so they can move further down your buyer journey.

In this article, we’ll show you how to create a landing page in WordPress so you can convert more visitors into paying customers and ultimately increase your revenue.

Here’s what we’ll cover in this article:

But first what exactly is a landing page? How about we find out next.

What is a Landing Page?

A landing page is a special web page that’s designed to sell more products or services and get more leads. This translates as more visitors taking some form of action on your site.

It’s called a landing page because this is where visitors land first on your website. They’ll then take some form of action like signing up to your email list, buying a product, or getting in touch which turns them into a lead.

To put it simply, a landing page is a powerful marketing asset created to achieve the goal of a marketing campaign. 

What are the Essentials of a Landing Page?

Because your landing page is designed to convince and convert site visitors there are some key elements every landing page should include in order to do the job well.

The 5 essentials of a landing page are:

  1. Attention-grabbing headlines – The best headlines instantly draw the reader in while clearly stating your offer and unique value proposition.
  2. Eye-catching images – Use high-quality images to illustrate your offer. Pictures of happy smiling faces living the end result of your product can help people imagine themselves as customers.
  3. Compelling copy – Ensure your copy is easy to read with a clear, legible font and write in a way that addresses your visitors’ pain points.
  4. Urgency – Including limited offers and countdown timers on your custom landing page creates a sense of urgency that compels visitors to take action for fear of missing out.
  5. Calls-to-action (CTAs) – Always include a bold CTA to encourage visitors to act on the information you’ve provided.

These are just the essentials of a landing page. Always keep in mind your target audience when putting your pages together and adjust the design and elements to suit both your desired goal and audience’s needs.

With this in mind, we’ll now show you how to create a landing page for your WordPress site using 3 different examples.

1. How to Create a Landing Page in WordPress Using Beaver Builder

For our first example, we’ll be using a WordPress plugin called Beaver Builder to create a simple and effective landing page.

As one of the best WordPress landing page plugins on the market Beaver Builder lets you create stunning landing pages using a number of ready-made templates. Even better, every element of these templates can be modified easily with the drag and drop interface.

To begin building your landing page, download Beaver Builder and install it on your WordPress website. For help on how to install WordPress plugins, see this step-by-step guide.

Once you’ve activated Beaver Builder go to Settings » Page Builder to get your settings and license key configured.

Enter your Beaver Builder license key

Under the License heading click the blue Enter License Key button and paste in the key given to you when you signed up. The license key can also be found on the Beaver Builder website under Account » Downloads & Orders.

Create a new Page

Now go to Pages » Add New to create your landing page.

Before moving forward it’s worth noting that some of the newer WordPress themes now include a full-width page template to help to design with page builder plugins.

If your theme is one of these you’ll find your template options under the Page Attributes tab as shown below.

WordPress page attributes

Next, give your page a title and click the Launch Beaver Builder button.

Launch Beaver Builder

Choose and Customize Your Template

Beaver Builder will launch using your existing WordPress theme and page template. To select a new landing page template click the plus symbol at the top right-hand side of the screen then select the Templates tab.

Beaver Builder landing page templates

From here you can choose any ready-made template that best suits how you’d like your landing page to look.

When you’ve chosen your template it will automatically load onto the page. You can then move your cursor over any element of the page to create a custom look.

Edit the Beaver Builder landing page

In Beaver Builder you can easily edit the following elements:

  • Page text and headlines.
  • Background color and text color.
  • All images including background images.
  • Row width and heights.
  • Font styles.
  • Animations.

Further to this, you can add and remove elements from your landing page.

To remove a page element simply hover your mouse cursor over it and click the X button.

Remove a beaver builder element

While adding an element involves clicking the Add button, choosing your desired row or module, and dragging it over to where you’d like to place it on your landing page.

Add a beaver builder module

Beaver Builder comes with a variety of essential landing page modules that extends the functionality of your page and helps create the opportunity for visitors to take action.

These modules include:

  • Basic – Page elements like audio embeds, buttons, headings, photos, etc.
  • Media – Modules with a focus on media such as maps, testimonials, icons, galleries, and content sliders.
  • Actions – Vital elements for your customers to take action including CTAs, callouts, forms, and menus.
  • Layout – Modules that make your page more versatile like accordions, pricing tables, sidebars, and tabs.
  • Info – Countdown timers and number counters to provide visitors with crucial information.
  • Posts – Post carousels, sliders, and general post displays to encourage people to read your content.
examples of beaver builder modules

Publish Your Landing Page

When you’re satisfied with how your landing page looks click the blue Done button in the top right-hand corner of your screen.

Click done when you have finished building your page

Then click Publish to publish your page.

Your page is now live on your website. Great work!

A published landing page using beaver builder

If you need to make any changes you can easily go back and edit the page in Beaver Builder.

But what if the goal of your landing page campaign involves having your visitors opt into your mailing list? We’ve got just the example for that coming up next.

2. Launch a Simple Landing Page for Your Optin Campaigns

As we mentioned earlier a well-optimized landing page can convert the website traffic that lands on it into valuable leads for your business.

In this example of building a simple landing page, we’ll show you how to create an optin landing page using OptinMonster the most powerful lead generation software for marketers.

It might sound complicated but we promise it’s super easy and you don’t need any knowledge of coding!

To get started you’ll need to grab yourself a copy of OptinMonster and choose at least the Pro version in order to access the Fullscreen Overlay feature we’ll be using in this guide.

Create a Campaign

When you’ve got your copy of OptinMonster, log in to your account and click the green Create Campaign button.

create a new OptinMonster campaign

Then select the Fullscreen Campaign Type which is what we’ll be using to build our simple landing page.

OptinMonster fullscreen campaign

Next scroll down to choose a template for your campaign.

OptinMonster campaign templates

Now give your campaign a name and choose the website you’d like to display it on. Then click the Start Building button.

Name your campaign and start building

Customize Your Campaign

The next page you’ll see is where you can edit your landing page and customize it to suit your branding and campaign goals.

customize your campaign

To make your changes click any element on your screen that you want to change and an editor will appear on the left-hand side of the page.

edit any landing page element

You can also add extra features to your page including:

  • Column Blocks
  • Images
  • Buttons
  • Chatbots
  • Coupon Wheels
  • Countdowns
  • Videos, and more.

Set Your Display Rules

When you’re happy with the design of your landing page, move on to the Display Rules tab which you’ll find at the top of the screen. This is where you’ll set when your landing page will show up to visitors.

By default, the display rules are set to show the page after a visitor has been on your site for 5 seconds.

OptinMonster display rules

But for this example, we’re going to change it show when a visitor is about to exit the site and if they haven’t seen the page for a while.

To do this we’re going to condition the page to show when an exit is detected and if a visitor has not seen the campaign in the last 7 days.

OptinMonster display conditions

Integrate Your Campaign

Next, it’s time to add your email service provider so you can collect email addresses from your landing page. You can do this by first clicking Integrations at the top of the page then Add New Integration on the left-hand side panel.

OptinMonster works with all major email marketing services so you’re sure to find yours in the drop-down list. For instructions on integrating with your email service provider, see the documentation here.

Here’s an example of how to set it up using MailChimp.

Integrate optinmonster with your email marketing service

Publish Your Campaign Landing Page

Now before we go ahead and publish the landing page, it’s a good idea to setup analytics so you can track your results.

To do this simply click the Analytics tab at the top of the screen and click the Connect button to connect to Google Analytics.

Connect Google Analytics

Now you’re ready to publish your landing page!

Simply head to the Publish tab and change the status of your campaign from Pending to Live.

Final landing page

But we don’t always need something as detailed as a marketing campaign if all you need is a landing page to display a simple form. That’s why in the next example we’ll show you how to create a landing page for your site forms.

3. How to Create a Landing Page in WordPress for Forms

Building a simple landing page for your WordPress forms is a smart idea if your normal forms aren’t performing as well as you’d like.

Let’s face it there’s a lot going on with your website. You’ve got content, offers, discounts, and so much more happening all at once. Those humble web forms can get overlooked pretty easily.

But with the Form Pages Addon from WPForms you can transform your forms into beautiful distraction-free pages your visitors simply can’t miss.

WPForms is the best drag and drop form builder for WordPress and with over 3 million users it’s the fastest way to create stunning forms.

To get started with building your form’s landing page grab a copy of WPForms here.

For access to the Form Pages Addon you’ll need to get the Pro version at the very least. You can then download the WPForms plugin from within your WordPress dashboard area.

Once you’ve installed and activated the plugin go to WPForms » Addons and scroll down until you find the Form Pages Addon.

Click Install Addon to install and activate it on your website.

WPForms Form Pages Addon

Then head to WPForms » Add New to begin creating your new form. You can learn all about creating a simple contact form in WordPress in this step-by-step guide.

To turn your form into a landing page click the Settings tab within the form builder and select Form Pages.

Edit form pages in WPForms

You’ll need to click Enable Form Page Mode to start editing your landing page. Then you can edit all of the following elements:

  • Form Page Title – Change the page title to something more attention-grabbing and descriptive.
  • Message – Explain why you’d like your visitors to fill in your form.
  • Permalink – Choose the URL structure of your landing page.
  • Header Logo – Upload your own logo in the header of the page.
  • Footer Text – Add your own custom text in the footer.
  • Color Scheme – Select either a pre-set color scheme or choose your own.
  • Style – Choose either a Modern or Classic page style.
WPForms landing page customization

When you’re happy with your settings click Save. Now whenever anyone visits the URL you chose in the setup stages, they’ll see the form landing page.

WPForms published landing page

And there you have it! You now know how to create a simple landing page in WordPress.

If you’re stuck for ideas on how to extend the functionality of your site even further, our showcase of the Best WordPress Plugins will definitely have something you’ll like.

And don’t forget if you like this article then please follow us on Facebook and Twitter.

Made with in Charleston, SC USA

Copyright © 2020 SeedProd LLC
Terms & Conditions | Privacy Policy | SeedProd Coupon Code