fervor [>]CODING & CURIOSITY
FERVOR LEARNING SYSTEMTUTORIALS
← WordPress

WordPress / 9 MIN READ

Beaver Builder Landing Page

Creating a Landing Page with Beaver Builder

From the original Fervor library. Examples may use older package versions.

How to Create a Landing Page in WordPress Using Beaver Builder

Introduction

If you want a high-converting landing page without touching a single line of code, Beaver Builder is a great choice. This powerful drag-and-drop page builder makes it easy to create stunning landing pages in WordPress.

👉 In this tutorial, I’ll show you how to create a landing page using Beaver Builder in just a few simple steps.

Step 1: Install & Activate Beaver Builder

Since you already have WordPress installed, let’s start by adding Beaver Builder.

How to Install Beaver Builder (Free or Pro)

  1. Log into your WordPress Dashboard.
  2. Go to Plugins > Add New.
  3. Search for “Beaver Builder”.
  4. Click Install Now, then Activate.

🚀 Pro Tip: If you want advanced features like premium templates, animations, and extra modules, consider getting Beaver Builder Pro from their official site.

Step 2: Create a New Landing Page

  1. Go to Pages > Add New.
  2. Give your page a name (e.g., “My Landing Page”).
  3. Under Page Attributes (right sidebar), set the template to “Full Width” (if available).
  4. Click Launch Beaver Builder.

Step 3: Choose a Template or Start from Scratch

  1. Inside Beaver Builder, click the Templates button (folder icon 📁).
  2. Choose from the pre-designed landing page templates.
  3. Click Insert to load the template.

Starting from Scratch (For Full Customization)

If you want a custom landing page, simply:

  • Click the + (Add Content) button.
  • Drag and drop rows, columns, and modules to build your layout.

Step 4: Customize Your Landing Page

Once your template or layout is ready, start customizing:

1. Edit the Headline

  • Click on the text area and enter a compelling headline (e.g., “Boost Your Business with Our Free Guide”).
  • Use the Style tab to change fonts, colors, and alignment.

2. Add an Image or Video

  • Drag the Photo Module to insert an image.
  • Use the Video Module to embed a YouTube or Vimeo video.

3. Insert a Call-to-Action (CTA) Button

  • Drag the Button Module and set the text (e.g., “Get Started Now”).
  • Link it to a signup form, contact page, or product page.

4. Add a Signup Form (Lead Capture)

To collect emails, use a form plugin like:
✅ WPForms (Easy drag-and-drop forms)
✅ Fluent Forms (Great for lightweight forms)
✅ ConvertKit (For email marketing)

  • Drag the HTML or Shortcode Module to insert the form’s shortcode.

Step 5: Optimize for Mobile & Speed

🔹 Click the Responsive Editing Mode in Beaver Builder to adjust for mobile.
🔹 Use Smush for image optimization.
🔹 Install WP Rocket for caching and faster loading times.

Step 6: Publish & Set It as Your Homepage

  1. Click Done > Publish in Beaver Builder.
  2. To make it your homepage:
    • Go to Settings > Reading in WordPress.
    • Select A static page under “Your homepage displays.”
    • Choose your new Landing Page and save changes.

🎉 Congratulations! Your landing page is now live. 🚀 Want more customization? Play around with different modules, backgrounds, and animations in Beaver Builder to make your page unique!

💬 Let me know if you need more tips! 😊

Bonus Gated Landing Page

How to Make Your WordPress Landing Page Gated (Lead Capture Page) Using Beaver Builder

What is a Gated Landing Page?

A gated landing page is a page where visitors must provide their email, phone number, or other details before accessing the content (like an eBook, webinar, video, or special offer). It’s a powerful way to capture leads and grow your email list.

Step 1: Decide How You Want to Gate the Page

There are 3 main ways to gate your landing page in WordPress:
1️⃣ Using a Form-Based Lock (Best for collecting emails)
2️⃣ Using a Membership Plugin (Best for premium content)
3️⃣ Using a Password-Protected Page (Simple but less flexible)

Method 1: Gate Content with an Opt-in Form (Recommended – Easy & Effective)

Step 1: Install a Form Plugin

To collect user information before granting access, install a form plugin like:
✅ WPForms – Best for beginners (Drag & Drop)
✅ Fluent Forms – Fast & lightweight
✅ ConvertKit – For advanced email marketing integration

🔹 How to Install WPForms:

  1. Go to Plugins > Add New in WordPress.
  2. Search for “WPForms”, then Install & Activate.

Step 2: Create a Lead Capture Form

  1. Go to WPForms > Add New.
  2. Choose Blank Form or Newsletter Signup Form template.
  3. Add fields like Name, Email, and Submit Button.
  4. Under Settings > Confirmations, choose:
    • Redirect to a Thank You Page (where the gated content is available).
    • OR show a success message with a Download Link.
  5. Click Save and copy the shortcode.

Step 3: Add the Form to Your Beaver Builder Landing Page

  1. Open your landing page in Beaver Builder.
  2. Drag the HTML or Shortcode Module.
  3. Paste the WPForms shortcode.
  4. Customize the design to match your branding.
  5. Click Publish to make it live!

🔹 Now, visitors must enter their details before accessing the content!

Method 2: Restrict Access with a Membership Plugin (For Exclusive Content)

If you want users to sign up or log in before accessing the page, use a membership plugin:
✅ Restrict Content Pro (Best for paid or free memberships)
✅ MemberPress (For selling subscriptions)
✅ Paid Memberships Pro (For advanced user control)

Step 1: Install & Set Up a Membership Plugin

  1. Go to Plugins > Add New, search for Restrict Content (free version available), then Install & Activate.
  2. Go to Settings > Restriction Settings.
  3. Under Default Restriction Message, enter a message like:
    “You must sign up to access this content. Click here to register.”

Step 2: Restrict Your Landing Page

  1. Edit your Landing Page in WordPress.
  2. In the Content Restriction Meta Box, select:
    • Logged-in users only (for free content).
    • Specific user roles (if using memberships).
  3. Publish the page – now only registered users can view it!

Method 3: Password-Protect Your Landing Page (Simple & Quick)

If you just want a basic gate without collecting emails, WordPress has a built-in option.

How to Password-Protect a Page

  1. Edit your Landing Page in WordPress.
  2. In the Publish box (top right), click Visibility > Password Protected.
  3. Set a password and click Publish.

👉 Now, only visitors with the password can access the page!

Bonus: How to Deliver the Gated Content Automatically

Once someone submits their details, you can:
✅ Redirect them to a hidden page (with a download link or video).
✅ Send an email with the content (using Mailchimp, ConvertKit, or ActiveCampaign).
✅ Use an auto-download link (if you’re offering a PDF, checklist, or eBook).

Example: Set Up an Automated Email in WPForms (With Mailchimp)

  1. Install and activate the WPForms Mailchimp Addon.
  2. Go to WPForms > Settings > Integrations and connect Mailchimp.
  3. In your Opt-in Form, go to Marketing > Mailchimp and enable email collection.
  4. Set up an automated email with the content download link.

Final Thoughts

🎉 Congratulations! You’ve successfully created a gated landing page in WordPress using Beaver Builder.

🔹 Best Option? Use WPForms + Beaver Builder for an easy and professional gated content experience.
🔹 Want a membership site? Use Restrict Content Pro for full control.
🔹 Need a quick lock? Use the Password Protect option.

💬 🚀😊

Bonus Gravity Forms set up

How to Create a Gated Landing Page in WordPress Using Gravity Forms & Beaver Builder

Introduction

A gated landing page requires users to submit their details (like email or name) before accessing your content. This is a great way to collect leads, build an email list, or restrict exclusive content.

👉 In this tutorial, we’ll use Gravity Forms + Beaver Builder to create a lead-capturing gated landing page in WordPress.

Step 1: Install & Activate Gravity Forms

Gravity Forms is a premium plugin, so you’ll need to purchase and download it from gravityforms.com.

How to Install Gravity Forms

  1. Go to Plugins > Add New in your WordPress dashboard.
  2. Click Upload Plugin, select the Gravity Forms ZIP file, then click Install Now.
  3. Activate the plugin and enter your license key (found in your Gravity Forms account).

Step 2: Create a Lead Capture Form in Gravity Forms

1. Build the Form

  1. Go to Forms > Add New.
  2. Name your form (e.g., “Lead Capture Form”).
  3. Click Add Fields to include:
    ✅ Name Field
    ✅ Email Field (Required)
    ✅ Submit Button
  4. Click Save Form when done.

2. Set Up Form Confirmation (To Grant Access After Submission)

  1. Go to Settings > Confirmations inside Gravity Forms.
  2. Click Add New Confirmation.
  3. Choose Redirect and enter the URL of the protected content page.
    • Example: yourwebsite.com/thank-you-page (This is where users will access the gated content).
  4. Click Save Confirmation.

Step 3: Add the Form to Your Beaver Builder Landing Page

  1. Open your Landing Page in Beaver Builder.
  2. Drag the Gravity Forms Module (if you have the Beaver Themer Add-on) OR use the HTML/Shortcode Module.
  3. Paste the Gravity Forms shortcode (found in Forms > Embed Shortcode).
    • Example shortcode:
      [gravityform id="1" title="false" description="false" ajax="true"]
  4. Style the form using Beaver Builder’s settings (fonts, colors, button styles).
  5. Click Publish to make it live.

🚀 Now, users must fill out the form to get redirected to the gated content!

Step 4: Bonus – Send an Automated Email With the Gated Content

If you want to email the gated content instead of redirecting users immediately:

  1. Go to Forms > Settings > Notifications.
  2. Click Add New Notification.
  3. Set Send To Email → {admin_email} or user’s email {Email:1}.
  4. In the message body, add the download link or content access details.
  5. Click Save Notification.

Alternative: Restrict an Entire Page Instead of Redirecting

If you want to hide the landing page content until a user submits the form, use:
✅ Gravity Perks GP Conditional Logic Add-on (Premium)
✅ Restrict Content Plugin (Free alternative)

Using Restrict Content Plugin (Free)

  1. Install Restrict Content (Plugins > Add New > Search “Restrict Content” > Install & Activate).
  2. Wrap your landing page content with this shortcode:
    [restrict]  
This content is only available after form submission.  
[/restrict]
  3. Users will need to log in or submit the form before viewing the content.

Final Thoughts

🎉 Congrats! You’ve created a gated landing page using Gravity Forms + Beaver Builder.

🔹 Best Setup? Use Gravity Forms’ Redirect Confirmation for a seamless lead capture process.
🔹 Want to send content via email? Use Gravity Forms Notifications.
🔹 Need full-page restriction? Use Restrict Content Plugin or Gravity Perks Add-on.

🚀😊

Keep your curiosity going.Explore more WordPress →
287 TUTORIALS · 22 TOPICSREADY