This tutorial is brought to you by MemberSpace, the original post is here.

1. Learn the Basics of Wix

In this section, you'll learn the basics of using the Wix editor to create and edit pages.

In this section, you’ll learn the basics of using the Wix editor to create and edit pages.

We will be walking you through the process of setting up your membership site in the Wix site editor. However, to save time, we are going to assume you have already done the following:

Once you have finished these tasks, you can begin this guide.

Editing the Main Site Page

When you choose a template, Wix will set you up with a mock site. It will contain filler images and text that should changed before your site launches. In this section, we will show you how to change this content, as well as how to add new elements, rearrange them, or delete them from the page altogether.

Removing Wix Page Content

After choosing a template, the first thing you may want to do is remove elements from the page. To delete an element, you need to first select the element that you want to delete.

Selecting an element is easy - just click it. When clicked, an element will be encased in a block. This will show you what is part of the element and what is not. Once an element is selected, go to the right sidebar and click the trash icon.

1-remove-wix-content-1-663c29.jpg

This will delete the element immediately. If you accidentally removed the element and would like to add it back, you can follow the steps in the next section (or click the Undo button in Wix’s top navigation bar).

Adding New Wix Page Content

Now that you have learned how to remove content, you can move on to adding page elements. Adding new content in Wix means that you will be interacting with the left Wix sidebar. This sidebar consists of eight icons, which represent different things you can do with your Wix site.

2-adding-new-wix-page-content-1-21d1b8.jpg

Wix has many site features that can be easily added from their site editor, like fully-functional contact pages, calendars, lightboxes, and more. However, walking you through adding all the different kinds of site features would take you all day to read. So instead we will be going over how to add the most commonly used site features.

Adding Basic Elements (Text, Headers, Buttons, etc.)

To add basic elements like text boxes and buttons, you will need to click the "+" icon in the left sidebar. This is the third icon down.

3-adding-basic-elements-text-headers-buttons-etc-1-03e056.jpg

This plus icon represents the "Add" button. When you hover over it, it will display the button name. If you click it, it will open a list of available elements you can add to your site.

3-adding-basic-elements-text-headers-buttons-etc-2-91a67d.jpg

In the window’s blue sidebar, you will see that the elements are divided into types. Hover over each type to see what elements are available. These elements will appear in the right side of the window. You can scroll through this section to see all the different elements available under each type. We recommend exploring this interface - there are many excellent elements to choose from!

Once you have found an element you like, you can add it to your site by clicking the element, then dragging and dropping it onto your site.

3-adding-basic-elements-text-headers-buttons-etc-3.jpg

Wix gives you a lot of wiggle room when it comes to placing elements. While other site builders sometimes automatically align things for you, Wix allows you to place many elements right where you drop them.

However, even Wix does have some restrictions. Some elements are location-specific. So, if you were to add a sidebar "Lightbox" element to your page, you may see that there is only one option for placement. This means that no matter where you drop the element, it will appear in the sidebar.

You may also see a grayed-out portion of your editor when you are dragging a new element onto the site. The grayed-out portion indicates a location where the element is not compatible.

A Note about Wix and Memberships MemberSpace is not affiliated with the Wix "Member’s Area" feature. MemberSpace is a third party system. While the "Member’s Area" feature requires you to purchase one of the Wix Business or eCommerce packages in order to use the feature’s payment processing, this is not necessary for MemberSpace feature’s payment processing to work on your Wix site.

4-a-note-about-wix-and-memberships-1.jpg

Customizing Wix Menus

Menus are an important part of a website. They enable users to navigate through your site. Luckily, Wix makes it very easy to customize menus. To begin customizing your site menus, go to the left sidebar and click the first icon. This is the "Menus & Pages" button.

5-customizing-wix-menus-1.jpg

This button will open an interface where you can manage your site menu and pages. To look at your current menu, make sure you have "Site Menu" selected in the interface’s blue sidebar.

5-customizing-wix-menus-2.jpg

When the "Site Menu" option is selected, the right side of the window will display your current site’s menu. This menu will appear as the navigation for your site, though the design and placement may vary by site template. However, in this interface, you can rearrange the order of items in your menu by clicking on the item and dragging it to a new location in the list.

5-customizing-wix-menus-3.jpg

If you would like to create a drop-down, drag the page underneath one of the other pages, making sure the page is indented when dropped. If a page is not indented, it will not appear in a drop-down menu.

You can also access additional options, like hiding a page from the menu, by hovering over the menu item, then clicking the circle with three dots. This will open a list of extra options to help you create the menu you want.

5-customizing-wix-menus-4.jpg

You can also add pages in this interface, but we will be going over that process in detail later in this guide.

Adding Custom Media

Uploading your own images is usually necessary when building a site, though Wix has a great library of useable images available to you. So how do you add your own custom media?

The answer is in the left sidebar, the fifth icon down: the "Media" button.

6-adding-custom-media-1.jpg

The "Media" button will bring up a variety of options, much like the "Add" button. However, all of the options in the "Media" window pertain to website media, like image, video, or sound files.

At the top of the window, there is a search bar that you can use to search through Wix’s media library. Enter any search term there and the window will bring up relevant results.

6-adding-custom-media-2.jpg

Underneath that, there is the "Upload Your Media" bar. This is where you can add your own custom content. In this section Wix offers several ways to upload your media: manual upload, Facebook, Instagram, Google Drive, and Google Photos.

6-adding-custom-media-3.jpg

You can also click any of these options to bring up the "Upload Media" interface, which has additional upload methods.

6-adding-custom-media-4.png

Use any of these methods to upload your custom media to your website editor. Once uploaded, your image will appear in the "Choose Media Files" window. In this window, you can click on media you want to add to your page. Once you have selected your media, click the "Add to Page" button in the bottom right corner.

6-adding-custom-media-5.jpg

When you click this button, the image will be deposited onto your current page.

6-adding-custom-media-6.jpg

You will likely need to adjust it by moving it to a new location. For instructions on how to move elements, read the next section.

Moving Wix Page Content

You can fine-tune your site design by moving elements around. To do so, hover over the element you would like to move. A box will appear around the element, showing you what that element contains.

To move the element, make sure that the four-arrow cursor is showing when you hover over the element. When it is, click and drag the element to its new spot.

7-moving-wix-content-1.jpg

Wix gives you free motion so that you can place your elements where you want. However, the free motion comes at the expense of snapping the elements into alignment. To counteract this, Wix supplies purple guiding lines to help you align elements.

7-moving-wix-content-2.jpg

If you make an accidental change (or you just don’t like how it turned out), you can click the "Undo" button in the top navigation bar of the Wix editor.

7-moving-wix-content-3.jpg

Similarly, if you want to get a change back that you previously undid, hit the "Redo" button to the right of the "Undo" button.

7-moving-wix-content-4.jpg

Editing Wix Page Elements

Wix has many ways you can edit your elements, many of which are specific to the element itself. While we can’t go over every single editing option Wix gives you, we can tell you where to locate these editing options.

The first location is in the right sidebar. This sidebar is the same one we talked about in the Removing Wix Page Content section. However, removing elements isn’t the only useful option in this sidebar. It also gives you additional editing options for the selected element.

8-editing-wix-page-elements-1.jpg

Editing options include arrangement, alignment, duplication, size adjustment, position movement, and more. One of the great things about the Wix editor is that most things are labeled. So if you hover over any of the icons in the left sidebar, a tooltip will appear with the purpose of the option.

8-editing-wix-page-elements-2.jpg

The second location where you can find editing options is on the element itself. When you click an element, a row of editing options will appear above it.

8-editing-wix-page-elements-3.jpg

The editing options will vary based on the element you select, but - just like with the sidebar - if you hover over the icons, a tooltip will appear with the option’s purpose.

🎬 2. Creating Content for Your Members

In this section, you'll learn how to organize and create content pages for your members.

In this section, you’ll learn how to organize and create content pages for your members.

Now that you know your way around the Wix editor, we are now going to walk you through some elements that are commonly included on a membership site main page.

Website design is very subjective. There’s tons of information out there, some of it conflicting, about how to design a website. That’s why, instead of telling you exactly how to design your site, we are going to show you some common elements and methods we have seen used successfully.

While most membership sites require some version of the elements we are about to cover, the way you go about displaying them is completely up to you.

Member Login/signup

The first item you want to include on your site’s main page is a way for users to get to the membership login or signup area.

If someone finds your site and wants to sign up, you want to make it as easy as possible for them to do so. That means including a link, having a pop-up, or something that will point the user to the login or signup process.

9-member-login-signup-1.jpg

And the login and signup processes don’t need to exist together. They can have separate entrances.

Neither the signup nor login element have to take up the bulk of the main page. On the contrary, it can simply be a link in the top navigation or a small section of the page.

9-member-login-signup-2.jpg

You can get creative, too. Come up with your own unique location. However, we do recommend you have it in a visible place so prospective and existing members will be able to find the login and signup processes easily.

Members-Only Content

Once members are signed in, you want them to be able to find the members-only content. Some choose to hide content until a user is logged in, while others allow non-member users to click on existing content, then offer them a signup/login form they need to complete before viewing the page.

Regardless of whether you choose to display content to non-members, you may still want to include the entrance to member content somewhere on the main page for members who have already logged in.

Pro Tip: if you choose to allow content to be clicked before signing in, MemberSpace has a great login/signup pop up you can utilize. We’ll cover how to set that up later in this guide.

Setting Up Other Wix Pages

Once your main page is finished, it’s time to start branching out into new pages.

New pages are essential to a membership site. While many other websites can subsist on a single page, a membership site almost always needs more than one page. Whether because of various types of content, a login/signup page, or more, membership sites are naturally complex.

To create a new page, go to the left sidebar within the Wix editor. Click the "Menus & Pages" icon. This will bring up the Site Menu interface. Once there, go to the bottom of this interface and click the "+ Add Page" button.

10-setting-up-other-wix-pages-1.jpg

This will automatically add a new page in the menu hierarchy and take you to your newly created page. Your first step after creating a page should be to name it and arrange it how you want it in the menu.

10-setting-up-other-wix-pages-2.jpg

Remember that you can click and drag pages in the Site Menu interface to change their arrangement.

Once you have named and arranged your page, you can click out of the Site Menu interface and begin customizing your site.

✅ 3. Getting Started with MemberSpace

In this section, we'll show you how to get started with MemberSpace and install it on your Wix site.

In this section, we’ll show you how to get started with MemberSpace and how to install it on your Wix site.

Now that you know the Wix basics, we can move to implementing MemberSpace on your site. These next sections will walk you through how to set up membership tools to transform your Wix site into a fully-functional membership site.

Installing MemberSpace on Your Wix Site

Before you can begin using all of MemberSpace’s membership features, you first need to install MemberSpace on your Wix site. To do this, you must log in to your MemberSpace account.

Once you have logged in, go to the top navigation menu and click the "Customize" button. Once there, click "Install Options."

11-installing-memberspace-on-your-wix-site-1.jpg

This will take you to a page where you will see MemberSpace’s installation code. Click the "Copy" button at the top of the page to copy this code.

11-installing-memberspace-on-your-wix-site-2.jpg

Next, go to your Wix Dashboard. The Wix Dashboard is the page you go to in order to access the Wix site editor.

11-installing-memberspace-on-your-wix-site-3.jpg

In the left sidebar, click "Settings." This will take you to the Site Settings page. On this page, return to the left sidebar and click "Tracking & Analytics."

11-installing-memberspace-on-your-wix-site-4.jpg

This will bring up the Tracking Tools & Analytics page. Click the "Custom" option.

11-installing-memberspace-on-your-wix-site-5.jpg

Note that you will need to have an upgraded Wix plan in order to complete this step. Tracking & Analytics is not available on the free Wix version.

Paste the code you received from MemberSpace into the available field beneath, "Paste the code snippet here." Once you have done that, enter a name into the "Name" field. This can be anything you want - it won’t affect the rest of the implementation. Then, in the "Add Code to Pages" section, make sure "All Pages" is selected and is set to "Load code once."

Next, go to the "Place Code in" section and make sure "Head" is selected. This will make sure the code is placed in the site’s header code.

11-installing-memberspace-on-your-wix-site-6.jpg

Once you have finished, click the "Apply" button at the bottom of the page.

You will need to make sure that you have a live domain connected to the website, not a default subdomain. If you do, this can mess up the MemberSpace integration. If you need help connecting your domain to the Wix website, see Wix’s instructions here.

If you do update your domain, be sure to return to the MemberSpace backend and update the website address. You can do this by going to the MemberSpace backend and clicking "Customize" in the top navigation bar. Once there, click the "Connected Websites" option. This will show you your connected websites. Find your site and click the "Edit Site" link. A page will appear with your site data.

11-installing-memberspace-on-your-wix-site-7.jpg

In the designated field, enter your full website address, then click the "All Done" button.

Automatic Login/signup Button Options

When MemberSpace is installed on Wix, it automatically adds a black Login/signup button in the bottom right corner of your website. This button will appear on every page.

This is to help you get started with your membership site. If you prefer the button to be located elsewhere, you can contact our support team for help moving the button to a different spot.

If you would like to use another form of signup/login (like an embed or popup, which we will cover later in this guide), the default button can be completely removed by following these steps:

Log in to your MemberSpace account. In the upper navigation bar, click "Customize." Once within the "Customize" interface, click "Sign up Experience."

12-automatic-login-signup-button-options-1.jpg

On the next page, find the "Display the Login/signup" checkbox and uncheck it. Then click "Save" to save your changes.

Keep in mind that if you remove the default login/signup button, then you will definitely need to implement another way for members to log in. We will cover some ways to do this in the upcoming sections.

🧭 4. Setting Up Your Member Site Navigation

In this section, you'll learn how to create navigation so your members can find their way around your site.

Now that MemberSpace is successfully set up on your Wix site, you can start adding in its membership features.

The first feature we are going to cover is how to set up your member navigation. Member navigation is important to any membership site. It is the portal through which your members will interact with your offering and where they will instinctively go when searching for something new.

How you ultimately create your site navigation is up to you, but we have two member-specific navigation methods others have used successfully in the past: a members-only navigation page and a members-only drop-down menu.

Members-Only Navigation Page

A members-only navigation page works as a homebase for your members. Once they log in, they will go to this page to access all the content their membership makes available to them.

To add a members-only navigation page, you must first add a page in Wix and design it to your liking. This is an excellent place to show members what content they have access to and direct them to the different categories of your offering. Refer back to the Learning the Basics of Wix for instructions on how to add and design pages.

When pages are created in Wix, they are automatically added into the top navigation menu. If you would prefer to keep it off-menu, click the "Menu & Pages" icon in the left sidebar, find the navigation page and click its corresponding three dots button. In the drop-down, select "Hide."

13-members-only-navigation-page-1.jpg

This will hide the page from your top navigation.

Once you have designed the page, it’s time to add it as a member page in your MemberSpace account. This will keep non-members from being able to access the page.

In order to add the navigation page in MemberSpace, you must first find the page’s URL. You can find it by going to your Wix editor and clicking the "Menu & Pages" icon in the left sidebar.

13-members-only-navigation-page-2.jpg

Once you have done that, find your chosen page in the "Site Menu" interface. Hover over it, then click the circle with three dots inside of it.

13-members-only-navigation-page-3.jpg

A list will appear with more options. Click the "Settings" option. This will take you to the page’s Settings interface.

At the top of the Settings interface, click the "SEO (Google)" tab, then scroll to the "What’s this page URL?" section. This will show you what the current page’s URL is.

13-members-only-navigation-page-4.jpg

You will need to remember this URL so that you can add it to your MemberSpace Member Page list in the next step, so we recommend copying it.

Once you know the page’s URL, log in to your MemberSpace account, then click "Member Pages" in the top navigation bar. This will take you to the Member Pages interface. In the left sidebar, click the "Add Member Page" button.

13-members-only-navigation-page-5.jpg

Clicking that button will take you to a form for you to fill out about the page. On this page, enter the page’s URL (that you found earlier) and select how soon after signup this page should be available to members.

13-members-only-navigation-page-6.jpg

If you want to add this as the default page where members are taken after signing in, you can do so by changing the "After signup - send members to this URL" or "After Login - send members to this URL" in your Member Plans settings.

13-members-only-navigation-page-7.jpg

Members-Only Drop-Down in Top Navigation

The other option is to create a members-only drop-down in your site’s top navigation menu. This is fairly straightforward and only requires you to rearrange your menu items in Wix’s Site Menu interface.

To set this up, log in to your Wix editor, then go to the left sidebar and click the "Menu & Pages" icon. This will open the Site Menu interface. Once there, you can arrange your pages into a drop-down by clicking and dragging them underneath another page.

14-members-only-drop-down-in-top-navigation-1.jpg

Make sure that the page is indented beneath the top-level page. Otherwise, it will still appear to be a top-level menu item. Note that the top-level page will be the one that is displayed on the navigation bar, then when someone hovers over it, the drop-down will appear.

14-members-only-drop-down-in-top-navigation-2.jpg

You can align the pages as you want them to appear in the drop-down. As always, click the "Publish" button in the right corner to make the changes live.

🔑 5. Creating Signup and Login Pages

In this section, we'll show different ways people can signup and login to your membership site.

Creating signup and login pages is necessary for any functioning membership site. However, you have a lot of options about how to go about incorporating the signup or login interface into your site.

MemberSpace provides both embedded and pop up signup/login interfaces that work with Wix.

Adding a Login/signup Pop Up to Wix

There are two options for adding a login/signup pop up to your site. The first option is to add the pop up to a menu, which will summon the pop up when users click the link. The second option is to add the pop up to a specific page. When added in this way, the pop up will be embedded somewhere in the page as a link or a button

Adding a Pop Up to Top Navigation

If you choose to add a pop up to your navigation, you must start by entering your MemberSpace account and clicking "Customize" in the top navigation menu. This will take you to the customization page with a list of options. Click "Install Options."

15-adding-a-pop-up-to-top-navigation-1.jpg

Once on the Install Options page, click the gray "More link options" button. This will open the area that holds the various login and signup codes.

15-adding-a-pop-up-to-top-navigation-2.jpg

Once there, find the pop up you want (there are two options - a login/signup pop up and a signup only pop up) and click the "Copy" button to copy the pop up code.

15-adding-a-pop-up-to-top-navigation-3.jpg

Once you have copied the pop up code, you can go back to your Wix site editor. In the Wix editor, click the "Menus & Pages" icon once again. Then, click the link icon at the bottom of the interface.

15-adding-a-pop-up-to-top-navigation-4.jpg

This will open a page where you can add an external link as a menu item. Make sure "Web Address" is selected in the left sidebar of the interface, then paste the code you copied earlier into the "What’s the web address (URL)?" field. By doing this, every time the link is clicked, it will summon the pop up form. When finished, click the "Done" button.

The new link will appear in your menu. Don’t forget to name it something that reflects its purpose, such as "Log in" or "Sign Up."

Note: Remember that you need to publish the site for changes like this to go live. You will also need to publish the site in order to properly test MemberSpace code in a Wix site - it won’t work in the Wix editor.

To non-members(or members who are not logged in), this link will summon the login/signup pop up. However, when logged-in members click this link, the pop up will appear as a "Your Account" link. Members can then use this link to access their account and make changes, such as changing email, viewing invoices, updating payment methods, etc.

Adding a Pop Up to a Specific Page

Adding a pop up to a specific page can work well, especially for signups. You can use the pop up in any interactive element that utilizes a link. For example, you could use a button or a link in text.

So, if you were to add a pop up to a specific page, you must start by entering your MemberSpace account, clicking the "Customize" tab, selecting "Install Options," then clicking the gray "More link options" button. This will bring up the pop up options. Find your desired pop up, then click the "Copy" button to copy the pop up code.

16-adding-a-pop-up-to-a-specific-page-1.jpg

Once you have copied the pop up code, you can go back to your Wix site editor.

Once there, click the "Menus & Pages" icon, and click the page where you want the pop up placed. Doing this will take you to that page’s editor.

16-adding-a-pop-up-to-a-specific-page-2.jpg

Once there, add the element that you would like to initiate the pop up.

16-adding-a-pop-up-to-a-specific-page-3.jpg

Depending on the element, the method for adding the link text may differ. But in all cases, paste the code you copied earlier in place of the URL. Doing so will add the code necessary to initiate the login/signup pop up with MemberSpace.

So, for example, if you were to add a button, you would select the element, then click its link icon to access its link interface.

16-adding-a-pop-up-to-a-specific-page-5.jpg

Once there, make sure "Web Address" is selected in the left sidebar, then paste in the MemberSpace code to the "What’s the Web Address (URL)?" field.

16-adding-a-pop-up-to-a-specific-page-6.jpg

You can style the link’s element however you desire. It will not affect the pop up functionality.

Note: Remember that you need to publish the site for changes like this to go live. You will also need to publish the site in order to properly test MemberSpace code in a Wix site - it won’t work in the Wix editor.

Just like the top navigation pop up, logged-in members will see a "Your Account" version of the pop up instead of the login/signup interface. This gives them the ability to access their account and make changes, such as changing email, viewing invoices, updating payment methods, etc. Members who are not logged in and non-members will instead see a login/signup pop up.

Embedding a Login/Signup in a Page

If you prefer to embed your login/signup form into a page, you can do so using the MemberSpace embed feature. MemberSpace supplies the code for the form embed, so all you have to do is paste the code into your Wix page.

You can find the embed code in the same place as the pop up options. Enter your MemberSpace account, click the "Customize" tab, select "Install Options," then click the gray "More link options" button. This will bring up the extra login/signup codes. Once you have found the embed code, click the "Copy" button to copy the embed code.

17-embedding-a-login-signup-in-a-page-1.jpg

Once copied, return to the Wix site editor and navigate to the page you want to add the embed form to.

When you have arrived on the page, go to the "Add" icon and then select "More" from the Add interface’s left sidebar. Choose "Embeds" from within the More categories, then click "HTML iframe" on the right side of the interface.

17-embedding-a-login-signup-in-a-page-2.jpg

The HTML iframe will be added to the page. In the element’s personal editing options, click the "Enter Code" button.

17-embedding-a-login-signup-in-a-page-3.png

Paste the MemberSpace code you copied earlier into the available field.

17-embedding-a-login-signup-in-a-page-4.jpg

The code will automatically turn the form into a login/signup form that both prospective and existing members can use.

Note: As before - remember that you need to publish the site for changes like this to go live. You will also need to publish the site in order to properly test MemberSpace code in a Wix site - testing MemberSpace code is not possible in the Wix editor.

As with the pop up login/signup forms, logged in members will see a "Your Account" version of the form instead of the login/signup interface. From here, they will be able to access their account and make changes, such as changing email, viewing invoices, updating payment methods, etc. Non-members and members who have not logged in will see a login/signup form.

🙅‍♀️ 6. Protecting Members-Only Content (Simplest Way)

In this section, you'll learn the easiest and simplest way to protect your member-only content pages.

Now that you have equipped your site with the necessary login/signup features, you can move on to adding your members-only content.

Adding Member-Only Pages

We touched on this earlier in the guide when we were going over how to add members-only navigation. However, you can also set an entire page to only be accessible by your members.

To do this, you must first build the page in Wix and find the page’s URL (which you can do by going to the "Menus & Pages" interface, clicking the three dots next to the name of the page, clicking the "Settings" option, then clicking the "SEO (Google)" section).

When you have built the page and found its URL, go to your MemberSpace account and click "Member Pages" in the top navigation menu. This will take you to the Member Page interface. Once there, click "Add Member Page" in the left sidebar.

18-adding-members-only-pages-1.jpg

This will take you to a form to fill out about your page. You will need to enter:

  • The link to the page (that you found earlier)
  • When the page should be available\
18-adding-members-only-pages-2.jpg

Fill out these fields, then click "Add Now." This will add the page to the list of members-only pages. MemberSpace will protect this page from being accessed by non-members.

🚫 7. Blacking Out Members-Only Content (More Secure)

In this section, we'll show you how to make your member-only content pages even more secure.

Content is the foundation of a membership site. You need to be sure that only your members can access it. You put your time and effort into creating the content; no one should be able to circumvent your system and access your resources for free.

That’s why MemberSpace has built ways to protect your content and keep it truly members-only. By default, members-only content is kept from non-members, but we have come up with an extra level of security to keep even the most determined non-member from getting around the membership wall.

This extra layer of security blacks out your pages for non-members.

When non-members access a non-blacked out member page, the page may show on the screen for a second or two before they are told it’s members-only content. With a blacked out page, there is no brief blip. It is consistently hidden from the non-member.

A blacked out page also helps if someone with advanced technical knowledge tries to bypass the membership pay wall. Users may disable their JavaScript in an attempt to get around the automatic redirect to the signup/login form. If they try this and page is blacked out, they are still kept from seeing the page.

Blacked out pages also deter search engines from automatically indexing your members-only pages along with the rest of your site.

While non-members and search engines will get a blacked out page, your members will be able to log in normally and see the page as it was intended.

To black out pages, you need to log in to your MemberSpace account and click on "Member Pages" in the top navigation menu.

24-protecting-your-members-only-content-1.jpg

This will take you to the Member Pages interface. Once there, go to the left sidebar and click "Blackout Your Pages."

24-protecting-your-members-only-content-2.jpg

You will be taken to the blackout pages interface. At the top of the page, you will see a code. You can use this code in your Wix interface to blackout your chosen pages.To copy this code, just click the "Copy" button.

24-protecting-your-members-only-content-3.jpg

Now, go to your Wix backend. Note that this is the Wix backend and not the Wix site editor. The backend is the interface you must go to right before entering the Wix editor. Once there, go to the left sidebar and click "Settings."

24-protecting-your-members-only-content-4.jpg

Then, scroll down the left sidebar and click "Tracking & Analytics."

24-protecting-your-members-only-content-5.jpg

This will bring up the Tracking Tools & Analytics interface. In the upper right corner of this interface, click the blue "+ New Tool" button. Doing this will bring up an interface where you can set up which pages you would like blacked out.

Note that you will need to have a paid Wix plan in order to complete this step. Tracking & Analytics is not available on the free Wix version.

In the interface, paste the code you copied from MemberSpace into the "Paste the code snippet here" field. Then, enter a name for the snippet. This can be anything you want - it will not affect the code’s efficacy. Then, in the "Add Code to Pages" section, select "Choose specific pages" and select the pages you would like to be blacked out. It’s important to select the correct pages here. You don’t want to accidentally black out a page for all site visitors.

Lastly, in the "Place Code in" section, select "Body- start." Doing this will place the code in the beginning of the site’s body code, which is where it needs to be in order to function properly.

24-protecting-your-members-only-content-7.jpg

Once you have done this, you will need to publish the site before changes can take place. You can publish by clicking the "Publish" button in the top right corner of the screen.

🔒 8. Adding Content Links to Member Pages (Most Secure)

In this section, you'll learn the most secure way to protect your member-only content.

If you want to add content that is accessible to members via link (like a download, a pop up, etc.), you can do that with MemberSpace’s content links.

With content links, you supply the file and MemberSpace makes sure the user is signed in before letting them see/download the item.

Content links work with:

  • PDF
  • Videos
  • Audio (MP3 only)
  • Images
  • HTML
  • Miscellaneous files

To create a content link, you must first add its file to MemberSpace so we can create a link that will protect it from non-members. To do this, log in to your MemberSpace account and click "Content Links" in the top navigation menu.

19-adding-content-links-1.jpg

This will take you to the Content Links page. To add a new content link, click the "Add Content Links" in the left sidebar. This will bring up the content upload page.

Now, as you can see, there are three content link options:

  • Miscellaneous Files (which you are on by default)
  • HTML
  • Videos
19-adding-content-links-2.jpg

These three different content types have different steps for adding them as content links. You can find an overview of each process below.

File Content Links (PDF, Audio, Images, Misc. Files)

Use this page to upload the content for your link. You can either drag and drop the file into the file upload area, or your can click the file upload area to bring up the file interface.

20-file-content-links-pdf-audio-images-misc-file-1.jpg

Once you have uploaded a file, click "Done Uploading" in the upper left corner.

20-file-content-links-pdf-audio-images-misc-file-2.jpg

This will return you to the main Content Links page.

HTML Content Links

If you wish to add HTML, return to the Add Content Links page and click the "Add HTML" button.

21-html-content-links-1.jpg

This will change the page to a form where you can enter the HTML, choose the content’s availability, and establish which plan has access.

21-html-content-links-2.jpg

When finished, click the "Add Now" button. You will be taken to the Add Content Links page where you can either choose to add more content links or click "Done Uploading" to finish the upload process.

Video Content Links

You can add videos hosted on YouTube, Vimeo, or Wistia as content links in MemberSpace. MemberSpace ensures that videos from these sources can be embedded on your Wix site in a way that only allows members to access them.

To add a video content link, click the "Add Videos" button at the top of the Add Content Links interface.

22-video-content-links-1.jpg

You will then need to fill out a form (which is very similar to the HTML content link form). This form will ask for the video’s URL, the content’s availability, and establish which plan has access to the video.

Since MemberSpace only accepts videos that are already hosted on YouTube, Vimeo, or Wistia, the formats for the URLs are important.

Recommended Youtube URL Format

22-video-content-links-2.png

Recommended Vimeo URL Format

22-video-content-links-3.png

Recommended Wistia URL Format

22-video-content-links-4.png

When finished filling out the form, click the "Add Now" button. You will be taken back to the Add Content Links page where you can either choose to add more content links or click "Done Uploading" to finish the upload process.

Videos are harder to keep secure since there isn’t a known solution to keep people from just recording the video. However, we do have some video security best practices we recommend. You can read more about these in our knowledge base article.

Adding Your Content Link to Wix

Now that your content has been successfully uploaded, you can add it to a Member Plan. On the main Content Links page, find your new content link and click its corresponding "Add plan access" link.

23-adding-your-content-link-to-wix-1.jpg

This will open the access plan form. You will be asked to fill in:

  • Title
  • When the content should be made available
  • What members can do with the content
  • Which Member Plan has access
23-adding-your-content-link-to-wix-2.jpg

When you have finished filling out the form, click the "Update Now" button. Once updated, you will be able to access the link to use the content on your Wix site.

To get the actual content link, go to the main Content Links page and click the "Copy" button next to the added content.

23-adding-your-content-link-to-wix-3.jpg

Then, go to your Wix site editor and navigate to the page that you want to add the content link to.

Once you are in the editor, you can add any element that accepts links (like a button or text).

Once added, paste the link into the element’s slot for URLs. For example, if you chose to use a button, you would click the button element to bring up its editing bar, then click the link icon.

23-adding-your-content-link-to-wix-4.jpg

This would take you to the link interface where you could add the content link. Make sure you have "Web Address" selected before adding the link.

23-adding-your-content-link-to-wix-5.jpg

While the content link needs to be present for the element to work, feel free to customize the element’s design however you like.

If you were to choose to embed the content link in text, the process is similar. You would add a text element to your page using the "Add" interface.

Then, type whatever text you desire. Once your text is there, you can add the content link by highlighting your existing text and clicking the link icon in the text element’s editing toolbar.

23-adding-your-content-link-to-wix-6.jpg

This will again bring you to the link interface, where you should select "Web Address" from the sidebar, then add the content link into the link field.

23-adding-your-content-link-to-wix-7.jpg

This will embed your link in the text, so when a user clicks it, it will execute the action you chose for the content (i.e. download, pop up, etc).

As with all MemberSpace-specific code, you will need to publish the page before testing it. It will not work as intended in the Wix editor.

🙋‍♂️ 9. Moving Forward and Getting Help

Now it's over to you! And remember, we're always here if you need help setting up your membership site.

Those are the basic steps for setting up a membership site with Wix and MemberSpace. If you need any additional help, contact our support team. They would love to help you get the most out of MemberSpace and help you craft the best membership site possible.

Tags