banner



How To Add A Sidebar In Wix

This tutorial is brought to you past MemberSpace, the original mail is hither.

i. Learn the Basics of Wix

In this section, you'll acquire 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 volition be walking you through the procedure of setting upward your membership site in the Wix site editor. Nonetheless, to save fourth dimension, we are going to assume you lot have already done the following:

  • Signed up for Wix account and plan
  • Chosen a Wix site template
  • Logged into the Wix Site Editor

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

Editing the Main Site Page

When y'all choose a template, Wix will prepare you upwardly with a mock site. It will contain filler images and text that should changed before your site launches. In this section, we volition show y'all how to change this content, likewise as how to add new elements, rearrange them, or delete them from the page birthday.

Removing Wix Page Content

Later on choosing a template, the kickoff matter you may want to do is remove elements from the page. To delete an element, you need to start select the element that y'all desire to delete.

Selecting an chemical element is like shooting fish in a barrel - just click it. When clicked, an element will be encased in a block. This will show y'all what is function 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 together it back, yous 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 yous take learned how to remove content, yous can move on to adding folio 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 yous tin do with your Wix site.

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

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

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

To add basic elements similar text boxes and buttons, you will need to click the "+" icon in the left sidebar. This is the 3rd icon downwardly.

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

This plus icon represents the "Add together" push. When you hover over it, it volition brandish the button proper noun. If you click it, it will open a list of bachelor elements you lot can add to your site.

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

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

In one case yous have establish an chemical element you like, you can add information technology to your site past clicking the element, so dragging and dropping it onto your site.

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

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

However, even Wix does have some restrictions. Some elements are location-specific. And so, if you were to add a sidebar "Lightbox" element to your page, you lot may see that there is just one option for placement. This means that no matter where yous drop the element, information technology volition announced in the sidebar.

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

A Annotation about Wix and Memberships MemberSpace is non affiliated with the Wix "Member's Area" feature. MemberSpace is a third party system. While the "Fellow member'due south Surface area" characteristic requires you lot to purchase i of the Wix Business or eCommerce packages in order to utilise the feature'due south payment processing, this is not necessary for MemberSpace feature'south 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 like shooting fish in a barrel to customize menus. To brainstorm 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 y'all tin manage your site menu and pages. To await at your current card, make sure you have "Site Menu" selected in the interface'southward 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 card. This menu will appear equally 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, elevate the page underneath ane of the other pages, making sure the page is indented when dropped. If a page is non indented, it volition non appear in a drop-down menu.

Yous can besides access additional options, like hiding a folio from the carte, by hovering over the menu item, then clicking the circle with iii dots. This will open a list of actress options to help you create the carte y'all desire.

5-customizing-wix-menus-4.jpg

You can besides add pages in this interface, but we will be going over that procedure in detail later on in this guide.

Calculation 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. And so how do you add your ain 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 together" button. Notwithstanding, all of the options in the "Media" window pertain to website media, like prototype, video, or sound files.

At the top of the window, in that location is a search bar that you tin use to search through Wix'south media library. Enter any search term there and the window will bring up relevant results.

6-adding-custom-media-2.jpg

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

6-adding-custom-media-3.jpg

You tin as well click whatsoever 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. One time uploaded, your image will appear in the "Choose Media Files" window. In this window, yous can click on media y'all want to add to your folio. Once y'all take 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 volition be deposited onto your current page.

6-adding-custom-media-6.jpg

You will probable need to adjust information technology by moving it to a new location. For instructions on how to move elements, read the adjacent section.

Moving Wix Folio Content

You tin fine-melody your site blueprint by moving elements around. To exercise and then, hover over the chemical element y'all would like to motion. A box will announced effectually the element, showing you what that element contains.

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

7-moving-wix-content-1.jpg

Wix gives you free motility so that yous can identify your elements where you want. However, the free move comes at the expense of snapping the elements into alignment. To counteract this, Wix supplies purple guiding lines to aid you align elements.

7-moving-wix-content-2.jpg

If yous make an accidental change (or y'all just don't like how it turned out), yous can click the "Disengage" button in the top navigation bar of the Wix editor.

7-moving-wix-content-3.jpg

Similarly, if you lot want to become a alter back that you previously undid, hit the "Redo" button to the correct of the "Undo" button.

7-moving-wix-content-4.jpg

Editing Wix Page Elements

Wix has many ways y'all tin can edit your elements, many of which are specific to the element itself. While we tin't go over every unmarried editing choice Wix gives yous, we can tell you lot 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 Folio Content section. However, removing elements isn't the only useful selection in this sidebar. It also gives you additional editing options for the selected element.

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

Editing options include organisation, alignment, duplication, size aligning, position movement, and more. 1 of the not bad things almost the Wix editor is that most things are labeled. And then if you hover over whatever of the icons in the left sidebar, a tooltip volition announced with the purpose of the pick.

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

The second location where you tin can discover 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 y'all select, simply - simply like with the sidebar - if y'all hover over the icons, a tooltip volition appear with the pick's purpose.

🎬 2. Creating Content for Your Members

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

In this department, y'all'll larn how to organize and create content pages for your members.

Now that you know your manner around the Wix editor, nosotros are now going to walk y'all 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 information technology conflicting, well-nigh how to design a website. That'south why, instead of telling y'all exactly how to design your site, we are going to bear witness you some common elements and methods nosotros have seen used successfully.

While about membership sites require some version of the elements we are about to cover, the way you get virtually displaying them is completely up to y'all.

Member Login/signup

The first item you want to include on your site'south master page is a manner for users to go to the membership login or signup surface area.

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

9-member-login-signup-1.jpg

And the login and signup processes don't need to exist together. They tin have split entrances.

Neither the signup nor login chemical element have to have upward the bulk of the main page. On the contrary, it tin simply exist 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 up with your ain unique location. Yet, we do recommend you accept information technology in a visible place so prospective and existing members will be able to find the login and signup processes hands.

Members-Only Content

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

Regardless of whether yous choose to display content to non-members, yous may still desire to include the entrance to member content somewhere on the chief folio for members who accept already logged in.

Pro Tip: if y'all choose to let content to be clicked before signing in, MemberSpace has a dandy login/signup pop up you tin use. We'll comprehend how to set that up later in this guide.

Setting Up Other Wix Pages

In one case your main folio is finished, it's time to outset 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 virtually always needs more than 1 page. Whether considering of various types of content, a login/signup folio, or more, membership sites are naturally circuitous.

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

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

This will automatically add together a new page in the menu hierarchy and take you to your newly created page. Your kickoff step after creating a folio should be to name it and conform it how yous want it in the card.

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

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

Once you have named and bundled 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 information technology on your Wix site.

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

Now that you lot know the Wix nuts, we can movement to implementing MemberSpace on your site. These next sections volition 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 tin can brainstorm using all of MemberSpace'due south membership features, you kickoff demand to install MemberSpace on your Wix site. To do this, you must log in to your MemberSpace account.

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

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

This volition have you to a page where you volition see MemberSpace'due south installation code. Click the "Re-create" button at the summit of the page to copy this code.

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

Next, get 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 pace. Tracking & Analytics is not available on the gratis Wix version.

Paste the code you received from MemberSpace into the available field beneath, "Paste the lawmaking snippet here." Once you have washed that, enter a name into the "Proper name" field. This can exist annihilation you desire - it won't affect the balance of the implementation. And then, in the "Add Code to Pages" section, make certain "All Pages" is selected and is set to "Load code in one case."

Next, go to the "Place Code in" section and brand certain "Head" is selected. This volition make sure the lawmaking is placed in the site's header code.

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

One time you lot have finished, click the "Use" button at the bottom of the page.

You lot will need to make sure that you take a live domain connected to the website, not a default subdomain. If you do, this can mess up the MemberSpace integration. If you lot need assist connecting your domain to the Wix website, see Wix's instructions hither.

If yous practice update your domain, exist certain to return to the MemberSpace backend and update the website address. You can exercise this by going to the MemberSpace backend and clicking "Customize" in the top navigation bar. One time at that place, click the "Connected Websites" option. This volition show yous your connected websites. Notice 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, and so click the "All Done" button.

Automatic Login/signup Button Options

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

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

If yous would like to utilise some other form of signup/login (similar an embed or popup, which we will cover later in this guide), the default button can exist completely removed past post-obit these steps:

Log in to your MemberSpace account. In the upper navigation bar, click "Customize." In one case 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 information technology. Then click "Save" to save your changes.

Keep in mind that if you remove the default login/signup button, then you lot will definitely demand to implement another mode for members to log in. We volition cover some ways to practice 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 style around your site.

Now that MemberSpace is successfully set up on your Wix site, yous tin first calculation in its membership features.

The start feature nosotros are going to cover is how to prepare upwardly your member navigation. Member navigation is of import 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 lot, only we accept two member-specific navigation methods others have used successfully in the past: a members-just navigation page and a members-merely drop-downward menu.

Members-Simply Navigation Page

A members-just 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 together a members-only navigation page, yous must get-go add a page in Wix and design it to your liking. This is an excellent place to evidence members what content they have access to and direct them to the unlike categories of your offering. Refer dorsum to the Learning the Basics of Wix for instructions on how to add and blueprint pages.

When pages are created in Wix, they are automatically added into the top navigation menu. If you would adopt to go along information technology off-menu, click the "Menu & Pages" icon in the left sidebar, observe the navigation folio and click its corresponding three dots button. In the drop-down, select "Hide."

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

This will hide the folio from your summit navigation.

Once you accept designed the page, it's fourth dimension to add it as a member page in your MemberSpace account. This will continue non-members from being able to access the page.

In society to add together the navigation folio in MemberSpace, you must first find the page's URL. You can find information technology by going to your Wix editor and clicking the "Bill of fare & Pages" icon in the left sidebar.

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

Once you have washed that, find your chosen folio in the "Site Bill of fare" interface. Hover over it, so click the circumvolve with three dots inside of it.

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

A list volition appear with more than options. Click the "Settings" option. This will take you to the folio'south 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 evidence y'all what the electric current page'south URL is.

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

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

Once you know the page'southward URL, log in to your MemberSpace account, then click "Member Pages" in the top navigation bar. This will take yous to the Member Pages interface. In the left sidebar, click the "Add Fellow member Page" push.

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

Clicking that push will accept you to a form for you to fill out nigh the page. On this page, enter the page's URL (that you lot plant earlier) and select how soon after signup this folio 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 tin can do then by changing the "Later on signup - send members to this URL" or "After Login - ship members to this URL" in your Fellow member Plans settings.

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

Members-Just Drop-Down in Top Navigation

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

To set this upward, log in to your Wix editor, so go to the left sidebar and click the "Menu & Pages" icon. This will open up the Site Bill of fare 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 peak-level folio. Otherwise, information technology volition yet announced to be a tiptop-level bill of fare item. Note that the summit-level folio will be the ane that is displayed on the navigation bar, so when someone hovers over it, the drop-down volition appear.

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

Y'all can align the pages as you want them to appear in the drop-down. Every bit 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 tin can signup and login to your membership site.

Creating signup and login pages is necessary for any functioning membership site. Nonetheless, 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 upward signup/login interfaces that work with Wix.

Adding a Login/signup Pop Upwardly to Wix

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

Calculation a Popular Up to Elevation Navigation

If you choose to add a pop upwardly to your navigation, yous must kickoff by entering your MemberSpace account and clicking "Customize" in the top navigation menu. This will take you to the customization folio 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 in that location, find the pop up y'all want (there are 2 options - a login/signup pop upwards and a signup only popular up) and click the "Copy" button to copy the popular up code.

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

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

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

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

The new link volition announced in your menu. Don't forget to name information technology something that reflects its purpose, such as "Log in" or "Sign Upward."

Note: Remember that you lot need to publish the site for changes like this to go live. Y'all 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 not-members(or members who are not logged in), this link volition summon the login/signup popular upwards. However, when logged-in members click this link, the pop up volition appear as a "Your Business relationship" link. Members can and so use this link to access their account and make changes, such as changing electronic mail, viewing invoices, updating payment methods, etc.

Adding a Pop Upward to a Specific Page

Calculation a pop up to a specific folio tin piece of 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 push button or a link in text.

And then, if you lot were to add a pop up to a specific page, you must showtime 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 upwardly options. Discover your desired popular up, then click the "Copy" push button to re-create the popular upward code.

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

One time yous have copied the pop upwards lawmaking, yous tin go back to your Wix site editor.

Once there, click the "Menus & Pages" icon, and click the folio where you want the popular up placed. Doing this volition take you to that page's editor.

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

One time at that place, add the element that you would similar to initiate the pop upward.

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

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

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

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

Once there, make sure "Spider web Address" is selected in the left sidebar, then paste in the MemberSpace lawmaking to the "What'southward the Web Address (URL)?" field.

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

You can style the link'due south chemical element however you desire. Information technology will not touch the popular up functionality.

Note: Remember that you lot need to publish the site for changes similar this to go live. You will also need to publish the site in order to properly exam MemberSpace lawmaking in a Wix site - it won't work in the Wix editor.

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

Embedding a Login/Signup in a Page

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

You lot can find the embed code in the aforementioned place as the pop upward options. Enter your MemberSpace business relationship, click the "Customize" tab, select "Install Options," then click the grey "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 lawmaking.

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

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

When y'all take arrived on the page, become to the "Add" icon and so select "More than" 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 chemical 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 lawmaking will automatically turn the form into a login/signup form that both prospective and existing members can use.

Annotation: As before - call back that you lot need to publish the site for changes like this to get live. You will besides demand to publish the site in order to properly examination 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 run across a "Your Business relationship" version of the form instead of the login/signup interface. From here, they volition 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 fellow member-only content pages.

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

Adding Member-Only Pages

We touched on this before in the guide when we were going over how to add members-only navigation. All the same, you can as well set an entire page to only be accessible by your members.

To exercise this, you lot must first build the folio in Wix and notice the page'due south URL (which you lot can exercise past going to the "Menus & Pages" interface, clicking the 3 dots next to the name of the page, clicking the "Settings" option, then clicking the "SEO (Google)" section).

When you have built the folio and establish its URL, become to your MemberSpace account and click "Member Pages" in the top navigation menu. This will have you to the Member Page interface. One time 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 well-nigh your page. You volition need to enter:

  • The link to the page (that you found earlier)
  • When the folio should be available\

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

Make full out these fields, then click "Add Now." This volition add the page to the listing of members-simply pages. MemberSpace will protect this page from being accessed by non-members.

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

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

Content is the foundation of a membership site. Y'all need to be certain that but your members can access it. You put your fourth dimension and attempt into creating the content; no 1 should be able to circumvent your system and admission your resources for free.

That'southward why MemberSpace has built means to protect your content and keep it truly members-only. By default, members-only content is kept from non-members, but we have come upwardly with an extra level of security to keep even the about determined not-member from getting effectually the membership wall.

This actress 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 not-fellow member.

A blacked out page also helps if someone with avant-garde technical knowledge tries to bypass the membership pay wall. Users may disable their JavaScript in an attempt to become around the automated redirect to the signup/login form. If they endeavour this and page is blacked out, they are yet kept from seeing the folio.

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

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

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

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

This will take you lot 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 meet a code. You lot tin can employ this code in your Wix interface to blackout your chosen pages.To re-create this code, just click the "Re-create" 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 yous must get to right before entering the Wix editor. In one case at that place, go to the left sidebar and click "Settings."

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

Then, gyre downwardly 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" push button. Doing this will bring up an interface where yous tin can set which pages you lot would like blacked out.

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

In the interface, paste the lawmaking you copied from MemberSpace into the "Paste the lawmaking snippet here" field. And so, enter a proper name for the snippet. This tin exist anything you want - information technology will not affect the code'southward efficacy. Then, in the "Add Code to Pages" section, select "Choose specific pages" and select the pages you would similar to be blacked out. It'southward important to select the right 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- offset." Doing this will identify the code in the beginning of the site's trunk code, which is where information technology needs to be in club to part properly.

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

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

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

In this section, you'll learn the virtually 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 upwardly, etc.), you tin practice that with MemberSpace'southward 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 just)
  • Images
  • HTML
  • Miscellaneous files

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

19-adding-content-links-1.jpg

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

Now, as y'all tin can encounter, there are 3 content link options:

  • Miscellaneous Files (which yous are on by default)
  • HTML
  • Videos

19-adding-content-links-2.jpg

These three dissimilar content types have different steps for adding them every bit content links. You lot 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 tin can click the file upload area to bring upwards the file interface.

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

In one case y'all 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 render you to the chief Content Links folio.

HTML Content Links

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

21-html-content-links-1.jpg

This will modify the folio to a course where you lot can enter the HTML, cull the content's availability, and establish which plan has admission.

21-html-content-links-2.jpg

When finished, click the "Add At present" push button. You volition be taken to the Add Content Links page where you can either choose to add together more content links or click "Done Uploading" to cease the upload process.

Video Content Links

Yous 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 simply 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 volition and so need to fill out a form (which is very similar to the HTML content link course). This form will ask for the video's URL, the content's availability, and found which plan has admission to the video.

Since MemberSpace merely accepts videos that are already hosted on YouTube, Vimeo, or Wistia, the formats for the URLs are of import.

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 volition exist taken back to the Add together Content Links page where you tin either choose to add together more than content links or click "Done Uploading" to finish the upload process.

Videos are harder to proceed secure since there isn't a known solution to go along people from just recording the video. However, we do have some video security best practices nosotros recommend. You can read more near these in our knowledge base commodity.

Calculation 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 respective "Add together plan access" link.

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

This will open the access plan form. Y'all will be asked to fill up in:

  • Championship
  • When the content should be made available
  • What members can exercise with the content
  • Which Member Programme has access

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

When you have finished filling out the grade, click the "Update Now" button. Once updated, y'all 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 folio and click the "Re-create" push 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 y'all 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 chemical element'south slot for URLs. For example, if you chose to use a button, y'all would click the button chemical element to bring up its editing bar, then click the link icon.

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

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

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

While the content link needs to be present for the chemical element to work, feel gratis to customize the chemical element'southward blueprint however you like.

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

So, type whatever text you want. Once your text is there, yous tin can add together 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 y'all to the link interface, where you lot should select "Web Address" from the sidebar, and 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 lot chose for the content (i.e. download, pop up, etc).

Every bit with all MemberSpace-specific lawmaking, you will need to publish the page earlier testing it. It will not work as intended in the Wix editor.

🙋‍♂️ nine. Moving Frontwards and Getting Assistance

Now it'southward over to y'all! And remember, we're always here if you need assistance 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 assistance, contact our support squad. They would love to help y'all go the near out of MemberSpace and assist you craft the all-time membership site possible.

How To Add A Sidebar In Wix,

Source: https://www.makerpad.co/posts/how-to-create-a-membership-site-using-wix-memberspace

Posted by: bentonalliat.blogspot.com

0 Response to "How To Add A Sidebar In Wix"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel