How to build an Elementor Membership Site with Paid Member Subscriptions

Elementor Membership Site with Paid Member Subsctiptions

Looking to add membership functionality to your Elementor membership site in WordPress?

Using Paid Member Subscriptions you’ll get access to content restriction based on the membership plan, plus the ability to customize restriction messages & templates directly from Elementor’s front-end visual interface.

In this tutorial, we’ll go through the steps required to build an Elementor membership site. To make things even better, know that all this functionality is available for free in Paid Member Subscriptions.

Before we get started, let’s have a look at some of the most important elements of a WordPress membership website:

Now let’s see how all of these can be achieved using the Elementor plugin for WordPress together with Paid Member Subscriptions.

Getting the plugins

The solution presented here includes two WordPress plugins. Both of them offer a free version as well.

Elementor

Elementor is one of the most popular drag-and-drop WordPress page builder plugins out there. You can download the Elementor plugin for WordPress for free.

It also lets you add custom CSS styling to customize the look and feel of your Elementor membership site. In addition to this, the plugin works with popular WordPress plugins like Yoast SEO which means you don’t have to worry about your site’s ranking. One of the neat features on offer with Elementor is that you can add a variety of global widgets to your membership site’s pages. For example, the HTML widget lets you embed HTML, CSS, shortcodes, and JS scripts into your site. In addition to this, you can also add widgets for progress bars, testimonials, Google Maps, image galleries, and carousels.

It’s also worth mentioning that the Elementor page builder offers tons of typography controls which makes it easy to customize your site and enhance its visual appeal. Elementor also has a built-in revision history system which makes it easy to revert back to an old page design. It’s the perfect solution for membership site owners that are serious about web design.

Paid Member Subscriptions

Paid Member Subscriptions is a robust and easy to use membership plugin that, among other things, integrates beautifully with the Elementor page builder. This integration is available in the free version as well so you don’t have to use Elementor Pro (available at Elementor.com). It also offers add-ons that help you enhance your Elementor membership site’s functionality.

Let’s proceed with downloading and activating both plugins.

Plugins for creating an Elementor Membership site

Setting up the membership plans

First, we’ll create a couple of subscription plans that our users can sign-up for. Under the Paid Member Subscriptions plugin’s menu, select “Subscription Plans” and click “Add New”. You’ll then be asked to enter the subscription plan name and details.

You can add things like duration, price, renewal type (whether it’s automatic or not). If you’re using an advanced payment gateway like Stripe, you can easily add free trial or sign-up fees to your membership plans.

Things like pay what you want pricing or fixed end date subscriptions are also available in the premium version. We’ll keep it simple for now and set up 3 basic plans: Free, Silver and Gold.

Once you’ve added the Free plan, under subscription plans list you can click the “Add Upgrade” button and proceed with adding the Silver, then Gold plan.

Here’s how they look after filling in all the details:

This way, you don’t have to create a custom post type for subscription plans and have a single post for each plan you offer.

Shortcode insertion

Now let’s create the pages that users will use to log in, register, or view their account details on your future membership site. We’ll do all of this using Elementor.

From the WordPress dashboard, click on Pages menu item, select “Add New” and enter a title (e.g. “Register”), then click on the “Edit with Elementor” button.

If you’re using Gutenberg it will look like this:

You’ll be taken to the front-end Elementor editor. From here you can insert three main building blocks (Sections, Columns, and Widgets) and add content to each of them. You can also select from the pre-designed templates one that should fit your page layout.

For now, we’ll focus on Widgets since this is what we’ll be using to easily include Paid Member Subscriptions register, login, and account forms. Under Elements, you’ll notice many types of widgets and if you scroll down you’ll get to a section called “Paid Member Subscription Shortcodes”.

Paid Member Subscriptions register login forms in Elementor

Simply drag a certain shortcode widget to the page you’re editing to display the desired form. Each shortcode comes with a few customization options that need to be added as parameters, that will be available directly in the interface. We’ll start by adding the Register shortcode widget to our page.

After you’re done designing your page, you can set the title under “Page Settings” to “Register”. Then publish the page using the button. That’s it, here’s how the page will look like.

Elementor membership site registration

Now simply repeat the same process of dragging the corresponding widget for adding Login, Account, and Recover Password forms to new pages.

Elementor membership account interface

Membership pricing table

What if you want to display each subscription plan’s features and make it easy for potential members to compare them? Well, then setting up a membership pricing table is the way to go.

Elementor Pro has a “Price Table” widget that allows you to do just that. Below we’ll look into building a membership pricing table in order to make it simple for people to sign up for a certain plan.

Creating a membership pricing table using Elementor

We’ll start by creating a new page called “Pricing” page and click “Edit with Elementor“. Because we created 3 subscription plans we’ll need 3 columns to display each plan details. For this click on the “Add New Section” icon and you will be asked to select your structure. We’ll opt for a 3 column structure.

Add new section using Elementor visual interface

Select structure in Elementor visual interface

Next, in the Elementor left sidebar, under Elements, make sure to search and locate the “Price Table” widget. Then simply drag it to each one of the three columns.

Creating an Elementor pricing table

You’ll be able to edit the name, price, and features of each plan.

The most important thing is the Subscribe button since it should contain a link that will make the user pre-select a certain plan.

Paid Member Subscriptions allow you to pre-select a subscription plan through an URL parameter.

In our case, let’s say the URL of the Register page created previously (containing the register form) is: https://example.com/register.

If we want to pre-select the Gold plan, the link to pre-select this plan would be: https://example.com/register?subscription_plan=63.

Note: “63” is the ID of the “Gold” subscription plan which can be found under the “Subscription Plans” list in the Paid Member Subscriptions plugin’s admin menu.

In case you want the selected subscription plan to be the only one present on the Register form (and exclude the others), you can use a second URL parameter “single_plan=yes“.

The link would become: https://example.com/register?subscription_plan=63&single_plan=yes. This is what we need to place under the Subscribe button link for the Gold plan.

Elementor pricing table

By clicking this button users will be taken to the register page, having the gold plan already selected and the only one listed. Here they will simply have to enter their account details and pay. Pretty neat, right?

Elementor Content Restriction

Access to premium content is one of the main selling points of a membership site. So let’s see how you can enable content restriction in Elementor with the help of Paid Member Subscriptions.

Using the two plugins together you can easily restrict access to any Elementor section or widget. Let’s add some premium content to a certain page. The Content Restriction options for Elementor can be found under the Advanced tab, after you select a widget or section.

To restrict this content for logged in users, set the “Restrict to logged-in users” switch to “Yes”. This will make the content of the selected section or widget available only to users that are logged in. Going further, to restrict the content by subscription plans, click inside the select and choose one or more subscription plans which should have access to this content.

You can do the same thing with any type of content, whether it’s a bbPress forum or WooCommerce members-only store. Both Paid Member Subscriptions and Elementor integrate seamlessly with WooCommerce which allows you to add e-commerce functionality to your site. For example, you can create a product page for members-only merchandise.

Elementor Restriction Messages & Templates

Moving forward, under Elementor Content Restriction you also have the option to display certain restriction messages or even templates

When a widget or section is not displayed, the plugin will not output anything. By setting the Enable Restriction Messages switch to “Yes“, restriction messages will be displayed instead.

The default restriction messages are defined under the Paid Member Subscriptions -> Settings -> Content Restriction page.

Creating Custom Restriction Messages and Templates

Custom restriction messages that are specific to the section or widget that is being restricted can also be configured. Simply set the “Enable Custom Messages” switch to “Yes“.
You’ll have two options to choose from:

  • Text – for adding a custom restriction message
  • Template – for displaying a certain Elementor template

Let’s have a look at the second option, setting a restriction page template. Below we have created a custom restriction template in Elementor for encouraging users to sign up for our membership plans. This will appear under the “Select Template” drop-down.

Elementor membership site - content restriction

This template shows a content restriction message with a call to action button that links to our membership pricing page. Here’s how it looks like when a non-member tries to access the premium content:

Restricted content access on Elementor Membership site

And that’s how simple it is to restrict any widget or section, while also adding custom restriction messages or templates. To encourage visitors to become members, you can create popups prompting them to register or redirect them to your home page or a landing page.

Start your Elementor Membership site today!

The Paid Member Subscriptions plugin makes it really easy to set up an Elementor Membership site in WordPress. You can easily add custom sign-up forms, create membership pricing tables, restrict content and customize restriction templates & messages directly from Elementor’s front-end visual interface. In addition to this, it comes with a number of useful add-ons that let you enhance your Elementor membership site’s functionality in different ways. This way, you don’t have to restrict yourself to a WordPress theme or theme builder.

The premium version gives you access to a ton of extra functionality like payment gateways (Stripe, Recurring Payments for PayPal Standard, PayPal Express available as add-ons), the ability to issue Invoices, add TAX & EU Vat to your plans, setup content dripping & more.

Paid Member Subscriptions Pro

Accept (recurring) payments, create subscription plans and restrict content on your website. Easily setup a WordPress membership site using Paid Member Subscriptions.

Get the plugin

Paid Member Subscriptions will also take care of the subscription plans creation, member management, and accepting payments.

Following the steps above you can turn any Elementor powered WordPress site into a membership site even if you don’t have technical know-how.

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

2 thoughts on “How to build an Elementor Membership Site with Paid Member Subscriptions

Leave a Reply

Your email address will not be published. Required fields are marked *

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