WordPress Landing Page: How to Build One With 3 of the Top Plugins

If you’re looking for an effective and easy way to build a WordPress landing page then you’re in the right […]

The post WordPress Landing Page: How to Build One With 3 of the Top Plugins appeared first on WPHacks.

If you’re looking for an effective and easy way to build a WordPress landing page then you’re in the right place! 👏

In this guide, we’ll introduce three of the best plugins that will help you craft an awesome landing page and then show you how to build your landing page in each.

The lineup for today is Elementor, Divi, and Thrive Architect.

Why these WordPress landing page plugins?

If you do even the slightest amount of research online, you’ll quickly find out that there are more WordPress landing page plugins than you can shake a stick at. There are literally tens of solutions on both the free and paid ends of the spectrum. So why did we select Elementor, Thrive Architect, and Divi for this post?

This all comes down to what each of these plugins represents:

  • Elementor is the most popular free page builder plugin for WordPress. It has a user base of over 5 million people and delivers an exceptional range of free features. This makes it the best solution for those who want to keep things on a budget. 💸
  • Divi is one of the most popular page building frameworks for WordPress overall. The Divi package includes not only a page builder plugin but also a whole WordPress theme based on the same page building engine. Plus, you also get access to additional plugins and templates for the same subscription fee. It’s the best solution for users who want to build their whole website with one tool rather than use a combination of different themes and plugins. 💪
  • Thrive Architect bridges both worlds with a bit more focus on the business side of things – letting you build landing pages and sales pages specifically. This can be your solution if you’re a bit more conversion-focused and the main thing you want from your website tools are measurable business results. 📈

👉 Pick your go-to plugin based on the info above and see how to build a great WordPress landing page with it below:

How to build a landing page with Elementor

Here are the steps:

Install Elementor

Elementor is a plugin that you can easily install via the WordPress dashboard. Log in and go to Plugins → Add New.

Enter “Elementor” into the search box. You’ll see the plugin on the list. Click on the Install Now button and then on the Activate button when it appears.

install Elementor to build your WordPress landing page

Later on, you can also get the pro version of Elementor, which comes with additional features and content blocks you can put on your landing page.

👉 Read also: Elementor Page Builder Plugin Review for WordPress

Create a new landing page with Elementor

Start working on your landing page normally. Go to Pages → Add New. Click on the Edit with Elementor button that’s at the top.

edit with Elementor

This will open up the main Elementor interface.

At this stage, you can do your work in two different ways:

  • either start from scratch and build your landing page element by element
  • start from a template and modify it to suit your needs

I’m a fan of the second approach since it’s easier for a beginner to handle. To start, click on the directory icon in the center, this one:

Elementor directory for WordPress landing pages

You’ll see Elementor’s catalog of ready-made templates. Pick one that you like and click on the Insert button next to it. When selecting a template, pick something that matches the overall purpose of your landing page.

Elementor catalog

Don’t worry about the landing page not looking 100% ideal. We’re going to modify it in the next step.

Elementor UI to build your WordPress landing page

Customize your landing page with Elementor

The first thing that you’ll want to do is realign the sections that are on the page already. You can do that by grabbing onto the six-dot icon at the top of each section and dragging it up or down the page.

Elementor drag and drop

In case you don’t need some of these sections, you can click on the “X” icon next to the six dots and delete the whole thing.

Editing any of the content that’s on the page is easy as well. Just click on anything that you want to modify. You’ll see the editing interface appear in the sidebar.

Elementor edit text

The same goes for any icon or graphic you might want to replace. You can see a toolbox icon in the image above. Clicking on it will bring up the icon library where you can select from hundreds of stock icons.

You can replace any of the images that are on the page in the same way. Click on the image and then replace it through the sidebar.

Elementor image replace

Another key thing you’ll most likely want to do is adjust the styling of each section – things like colors, backgrounds, and fonts.

To do that, click on the same six-dot icon above the section that you want to adjust. Then, from the sidebar, click on the Style tab.

Elementor style tab

This is where you can set things like:

  • the background of the section
  • background overlay
  • borders
  • typography

Making adjustments here is pretty easy to grasp. Go through each option in the sidebar one by one and see its effect on the page preview.

One great thing about Elementor that has a huge impact on your landing page’s appearance is the possibility to set not only solid-color backgrounds but also gradients, image backgrounds, slideshows, or even video backgrounds.

Elementor image bg

Add new content to your WordPress landing page

Editing what’s already on your WordPress landing page is not the only thing you’ll want to do. Elementor also allows you to pick from a catalog of content blocks, which you can freely add to your page.

To do that, click on any of the “+” icons next to the six-dot icons.

Elementor plus icon

When adding a new section, first select the section layout that you like – basically, pick the number of columns you want. Then, click on the new “+” button that’s in the center. You’ll see your choice of new content blocks in the sidebar. There’s a lot to choose from here, and even more if you’re on the pro version of Elementor.

Elementor content blocks

Depending on the block you’ve selected, you’ll see a different set of options. Click on the six-dot icon to view them.

You’ll find the main settings in the Layout tab and the looks-related things in the Style tab. You can add as many elements to your landing page as you want. Adjusting them works through the same interface, too. Experiment with what’s there until your landing page looks like you want it.

Save and publish your landing page

The last step is to publish your landing page. To do this, click on the Publish button that’s in the bottom left corner.

Elementor publish your WordPress landing page

And that’s all! Your WordPress landing page is now live! 🍾

How to build a landing page with Divi

Here are the steps:

Install Divi

First, you must decide which version of Divi you want to use:

If you’re planning to keep your current WordPress theme and just add some new landing page building functionality to it, you should go with the Divi Builder plugin.

Both the theme and the plugin are available under the same subscription fee – $89 / year.

In this guide, we’re going to use the plugin. To install Divi Builder, you first have to download it from your customer profile at Divi’s website.

Then, go to Plugins → Add New in your WordPress dashboard. Click on the Upload Plugin button and select the Divi archive from your desktop. Click on Install Now.

Uploading Divi to your server can take a minute since it’s a large file. You’ll see the following screen when it’s done:

Divi installed and ready to build your WordPress landing page

Click on Activate Plugin to complete the process.

Create a new landing page with Divi

Start building your WordPress landing page by going to Pages → Add New. Click on the Use Divi Builder button that’s in the center.

divi launch

A quick onboarding tour will pop up. Check it out to see how to navigate Divi’s basic interfaces.

Divi allows you to build a new landing page in three main ways:

divi start

The most effective path is to go with a ready-made template and then modify parts of it to make that WordPress landing page fit your needs.

To begin, click on the middle block and choose from a pre-made layout. Divi comes with hundreds of templates, categorized based on niche and purpose.

divi templates for a good WordPress landing page

Once you pick any of the layout packs, you’ll see all the individual templates that are part of it.

divi more templates

To import a template, click on the Use This Layout button. The import can take a minute. When it’s done, you’ll see your WordPress landing page’s current design in all its glory. Now let’s customize it!

Customize your landing page with Divi

The first thing you might want to do is realign some of the sections on the page. To do it, grab onto the blue-arrows icon in the top left corner of the section that you want to move, and then drag it up or down the screen.

divi realign sections on your WordPress landing page

Any section can also be deleted by clicking on the trash can icon that you can see in the screenshot above.

To edit any text, just click on it and begin typing. In the same place, you can also style your text by adding bold or italics, changing the color, and so on.

divi text edit

Replacing images or icons is done in a very similar way. Click into the block that contains the image/icon, and then click on the black gear icon next to it.

divi gear icon

This will open up a new editing panel. Scroll to the tab labeled Image & Icon. You can select your new icon from the list.

divi icon catalog

You’re also not stuck with the styling of any of the elements that have come with your pre-made WordPress landing page template. Anything can be tweaked.

Look for the gear icons next to any section or any individual block of content on the page. After clicking on it, a new window will pop up. This is where you can do all your customizations.

There are three tabs available. The second one – Design – is where you can find most looks-related options.

divi design options

Some of the things you can edit here:

  • the layout of the element in question
  • widths, heights, and other sizing settings
  • borders
  • shadows
  • animations (fade-ins, bounces, zooms, and more)

If you want to change any element’s background, this can actually be found in the Content tab. Divi supports solid color backgrounds, gradients, images, and even videos.

divi backgrounds

Add new content to your WordPress landing page

Most of the time, you’ll also want to add new elements to your landing page. You can do that by clicking on any of the “+” buttons either between the existing sections or at the very bottom of the page.

You get a choice of a couple of section types.

divi section types

Click to see what the differences between them are, but in general, every section type can house all kinds of content.

With the section type selected, you will be able to pick from Divi’s many individual content blocks.

divi content blocks for a WordPress landing page

After selecting any of them, you’ll see a window that’s similar to the ones we’ve seen before – you can adjust the new block’s styling and content here.

divi edit content

Experiment with what’s available. You can add any number of content elements to your WordPress landing page and then customize them accordingly.

Save and publish your landing page

When your work is done, it’s time to publish the new landing page. To do this, click on the three-dots icon at the bottom of the screen and then on Publish.

divi publish your WordPress landing page

And that’s all! Your WordPress landing page is now live! 🍾

How to build a landing page with Thrive Architect

Here are the steps:

Install Thrive Architect

Thrive Architect is available either as a standalone plugin or part of the larger Thrive membership (giving you access to eight more tools and plugins):

  • Thrive Architect on its own starts from $67 / year
  • Thrive membership is $19 / month

No matter which you choose, installing Thrive Architect works the same. Go to your customer profile and download the Thrive Product Manager plugin.

Once you have it, go to Plugins → Add New in your WordPress dashboard. Click on the Upload Plugin button and select the plugin’s ZIP from your desktop. Click on Install Now.

When the file finishes uploading, click on Activate Plugin.

In your WordPress dashboard sidebar, click on Product Manager and proceed according to the prompts to validate your website.

Next, click on Install product next to Thrive Architect.

Thrive Architect install

The installation should take less than a minute.

Create a new landing page with Thrive Architect

To start working on your landing page, go to Pages → Add New. Click on the big Launch Thrive Architect button.

Thrive Architect launch and build your WordPress landing page

Thrive Architect already knows what you probably want to build, so it’ll suggest getting started with a pre-made landing page.

Thrive Architect landing page

Thrive Architect has 60+ modern landing page templates in the catalog (called smart landing pages) and more than 200 legacy landing pages (older creations).

The smart landing page directory has many interesting designs that fit different niches and purposes (sales, email promo, etc.).

Thrive Architect templates for a quality WordPress landing page

Each landing page template is actually a collection of a handful of individual landing pages that can be displayed at different stages – for example, the main landing page, the “thank you” page, the confirmation page, etc.

Thrive Architect an example ebook landing page

You can import a landing page design that you like by clicking on it and then on the Apply Template button.

Customize your landing page with Thrive Architect

The Thrive Architect interface offers a lot of options and controls for different things on the page. You can access the landing page’s main settings in the right sidebar, the customizations in the left sidebar, and then there’s the main canvas in the center.

Thrive Architect UI for building a WordPress landing page

To realign any of the sections, just grab onto one of the arrows icons in the top right corner of the element, and drag it up or down the page.

Thrive Architect realign

You can also delete any section by clicking on the trash can icon (see in the screenshot above).

Text content can be edited by clicking into it and typing.

Thrive Architect edit text

Any section or block also has its own set of settings and customizations. Just click into the block to see them.

Thrive Architect block options

Depending on the block you’ve selected, you can adjust:

  • general layout settings (widths and sizes)
  • typography
  • backgrounds
  • borders
  • animations
  • shadows
  • HTML attributes
  • scroll behavior, and more

Add new content to your WordPress landing page

Thrive Architect comes with tens of different content blocks that you can add to your WordPress landing pages. You can pick your block after clicking on the “+” button in the right sidebar.

Thrive Architect add content to your WordPress landing page

The content blocks you’ll find here should be more than enough to satisfy any landing page needs.

Thrive Architect blocks available

You can add them to your page either by dragging and dropping them into place or just clicking on them in the sidebar, in which case they’ll be added at the bottom.

For some types of blocks, you’ll be able to select from some pre-made designs of the block itself. Here’s what this looks like for the call to action block:

Thrive Architect call to action

To customize your new block, click on it to see the options available.

Thrive Architect CTA options

When working on your WordPress landing page, it’s best to go through the available content blocks one by one and see what fits your landing page’s purpose.

Save and publish your landing page

When you’re done, don’t forget to save your work. Click on the arrow next to the SAVE WORK button in the bottom left corner of the screen, and then click on Save and Return to Post Editor.

Thrive Architect save work and publish your WordPress landing page

To publish your page to the public, click on the main Publish button in the WordPress dashboard.

WordPress publish button

And that’s all! Your WordPress landing page is now live! 🍾

Summary on best WordPress landing page plugins

As you can see, each of these WordPress landing page plugins can do a very similar thing for you – let you build a beautiful and optimized landing page! The difference is in how each plugin delivers on this promise and the features available along the way.

  • Elementor is the perfect solution for users on a budget who don’t want to spend anything on their landing pages. 💸
  • Divi is great if you want to move to a whole WordPress design framework that can handle not only your landing pages but also the design of the entire site. 💪
  • Thrive Architect is perfect for users who value results-oriented tools that bring not only the toolbox necessary to build a good landing page, but can also help you optimize that landing page and the experience users have with it. 📈

What do you think of these WordPress landing page plugins? Feel free to share which is your favorite one.

The post WordPress Landing Page: How to Build One With 3 of the Top Plugins appeared first on WPHacks.

Rojenx is a leading concept artist who work appears in games and publications

Check out his personal gallery here

This site uses Akismet to reduce spam. Learn how your comment data is processed.