How to Create Landing Pages with Page Builders

Who here wants to stop talking about landing pages and start building them? I do!

If you’ve watched my previous videos, we’ve learned how to plan and design landing pages. Today, we’re going to finally create one.

Three Page Builders for Creating Landing Pages in WordPress

I’m going to showcase how to create landing pages with WordPress:

1. Out-of-the-Box: This uses no special features, only bare basics and some images for S.T.E.E.P. methods.
2. SiteOrigin Page Builder: This shows how to install a free page builder and use its unique widgets.
3. Divi Builder: This shows how to install Elegant Theme’s Divi Builder and use some of its unique widgets.

For these, I’m using WordPress with a default theme so you can compare the different page builders. For each of these, we’re going to be asking people to buy essential oils.

How to Create Landing Pages using WordPress Out-of-the-Box (OOTB)

The first landing page we’ll create will use WordPress out-of-the-box (OOTB) with no special page builder plugins. But since you can edit content, it works as a page building tool, even if it’s a limited one.

You can either watch a tutorial where I show you how to do it, or read ahead. The tutorial is a bit long, but gives you an idea of how long it takes to create a landing page yourself.

Steps covered in the video:

1. Create a page in WordPress.
2. Outline the S.E.R.V.E. and S.T.E.E.P. using the WordPress editor.
3. Write an Audience-Problem-Oriented headline (H1) and opening paragraph
4. Create a Solution-oriented subhead (H2) and paragraph.
5. Continue with a verification subhead (H2) and paragraph
   1. Scientific Metrics: Make a simple Images exported from Keynote
   2. Testimonials: Use blockquotes for testimonials
   3. Explanations: Use unordered or definition lists
   4. Examples: Use Subheads (H3-H6) with paragraphs
   5. Process: Use Ordered lists
6. Call to Action: Big bold link

Advantages of OOTB Method:

• No extra plugins
• Limitations can force you to focus on content quality

Disadvantages of OOTB Method:

• Limited to basic theme styles
• Call to action button won’t stand out without CSS code or an image.

How to Create Landing Pages using SiteOrigin Page Builder

Let’s see how we can spice up our landing page using SiteOrigin’s Page Builder plugin. To save time, I’ve copied content from the previous OOTB page.

You can either watch a tutorial where I show you how to do it, or read ahead. The tutorial is about 30 minutes long, but gives you a peek at the SiteOrigin Page Builder interface and what to expect.

Steps covered in the video:

1. Install SiteOrigin Page Builder & Widgets Bundle plugin
2. Edit the copied page and switch to Page Builder. Note the change.
3. Break up S.E.R.V.E. and S.T.E.E.P. into separate content blocks for make it easier to see.
4. Convert content using the SiteOrigin Page Builder widgets:
   1. Scientific Metrics: Use the images exported from Keynote with Image Widget.
   2. Testimonials: Use Slider Widget.
   3. Explanations, Examples, Process: Use Features Widget with icons.
   4. Call to Action: Call To Action Widget and Button Widget.

Advantages of SiteOrigin Page Builder:

• Gives you ability to apply column grids and some nice widgets
• More appealing than OOTB
• Free!

Disadvantages of SiteOrigin Page Builder

• Limited in comparison to Divi Builder
• If you deactivate the plugin, it will leave a bunch of nonsense shortcodes mixed in with your content.

How to Create Landing Pages using Elegant Theme’s Divi Builder

Let’s up the ante with the Elegant Theme’s Divi Page Builder tool. To save time, I’ve copied content from the previous out-of-the-box page.

You can either watch a tutorial where I show you how to do it, or read ahead. The tutorial is about 30 minutes, but gives you a peek at the Divi Builder interface and what to expect.

1. Install Divi Builder
2. Install SiteOrigin Page Builder & Widgets Bundle plugin
3. Edit the copied page and switch to Page Builder.
4. Break up S.E.R.V.E. and S.T.E.E.P. into separate content blocks for make it easier to see, then convert:
   1. Scientific Metrics: Bar Counter, Circle Counter, Number Counter widgets
   2. Testimonials: Testimonial widget
   3. Explanations: Accordion widget
   4. Examples: Gallery widget
   5. Process: Blurb widget
   6. Call to Action: Call to Action widget or Button widget

Advantages of Divi Page Builder:

• Gives you more layout options and widgets than you’ll know what to do with
• More appealing than SiteOrigin or OOTB
• Interface is a lot easier to use (my opinion)

Disadvantages of SiteOrigin Page Builder

• Costs money
• If you deactivate the plugin, it will leave a bunch of nonsense shortcodes mixed in with your content.

So there you have three ways for building landing pages in WordPress.

Thanks for watching this series on creating landing pages! Subscribe below to my newsletter to get notified about the next series.