Looking to add membership functionality to an Elementor powered website?
Using Paid Member Subscriptions you’ll get access to content restriction based on 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 membership website:
- Ability to create subscription plans and accept payments
- Restrict content access to members only
- Add front-end registration and login forms
- Create a pricing table to highlight the main benefits of each membership plan
- Customize things like restriction messages, or add custom templates to boost conversion
Now lets see how all of these can be achieved using Elementor together with Paid Member Subscriptions.
Getting the plugins
The solution presented here includes two plugins. Both of them offer a free version as well.
- Elementor is one of the most popular page builder plugins for WordPress. You can download Elementor for free.
- Paid Membership Subscriptions is a robust and easy to use membership plugin that, among other things, integrates beautifully with Elementor. This integration is available in the free version as well.
Let’s proceed with downloading and activating both plugins.
Setting up the membership plans
First we’ll create a couple of subscription plans that our users can sign-up for. Under Paid Member Subscriptions 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.
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:
Now let’s create the pages that users will use to login, 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 visual interface. 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.
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”.
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.
Now simply repeat the same process of dragging the corresponding widget for adding Login, Account and Recover Password forms to new pages.
Creating a membership pricing table using Elementor
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.
We’ll start with 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 “Add New Section” icon and you will be asked to select your structure. We’ll opt for a 3 column structure.
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.
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 allows 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.
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.
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.
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 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.
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:
And that’s how simple it is ton restrict any widget or section, while also adding custom restriction messages or templates.
Wrapping it all up
Paid Member Subscriptions makes it really easy to setup an Elementor Membership site. You can easily add sign-up forms, create membership pricing tables, restrict content and customize restriction templates & messages directly from Elementor’s front-end visual interface.
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 website into a membership site.
Subscribe to get early access
to new plugins, discounts and brief updates about what's new with Cozmoslabs!