← All blog posts

Hide or Show Elements on Webflow Membership Sites with Memberstack 2.0

The guide covers setting up Div blocks for logged-in and logged-out users, applying data attributes using Memberstack, extending the application of data attributes to additional elements, and testing the functionality by logging out and visiting the profile page. Mastering these techniques not only helps protect valuable content but also enhances user experience by tailoring content based on login status.

April 6, 2023

Build seamless membership experiences on your Webflow site with Memberstack 2.0. This tutorial demonstrates how to hide or show elements on your website, depending on whether a user is logged in or not. Create an engaging and personalized user experience for your members while protecting your valuable content.

Step 1: Setting Up Div Blocks for Logged-in and Logged-out Users

In your Webflow project, open the profile page you want to apply this technique to. Here, you'll find two Div blocks named "form logged in" and "form logged out," within the profile content section. When a user is logged in, the "form logged in" Div block will display content exclusive to logged-in members. Similarly, the "form logged out" Div block will display content exclusive to non-logged-in visitors.

Step 2: Applying Data Attributes in Memberstack 2.0

To control the visibility of these Div blocks based on the user's login status, we will use data attributes in Memberstack 2.0.

Showing Content to Logged-in Members:

  1. Select the div block you want to restrict to logged-in members (e.g., the contact form).
  2. Add the following data attribute: data-ms-content.
  3. As the value, input members. This div block will only be displayed if a user is logged in.

Hiding Content from Logged-in Members:

  1. Select the div block you want to hide from logged-in members (e.g., the sign-up or log-in box).
  2. Add the data attribute as above: data-ms-content.
  3. As the value, input !members. Adding the exclamation mark before "members" ensures that this div block is only visible to non-logged-in visitors.

Step 3: Applying Data Attributes to Additional Elements

This method can be applied to numerous elements on your membership site. For instance, hide or display user location, portfolio sections, or specific content blocks by adding appropriate data attributes. You can even restrict content based on plans or payment status if needed. Once you are satisfied with the setup, publish your Webflow project and test on the live site.

Step 4: Logging Out and Testing the Page

After applying the data attributes and publishing your Webflow project, it's essential to test the functionality. Log out of your account and navigate to the profile page that you applied this technique to. As a logged-out visitor, observe that the contact form is not visible, and instead, you see a call-to-action prompting you to sign up or log in to contact the freelancer. This confirms that your data attributes are working correctly.

Conclusion

Mastering the use of data attributes in Memberstack 2.0 allows you to create tailored experiences for various user statuses. By hiding or displaying elements based on user login, you can safeguard valuable content while offering personalized experiences on your Webflow membership site. Reach out with any questions, and enjoy crafting your customized Webflow site with Memberstack 2.0!

Use the code

Copy

Dive Deeper with the MVMP Marketplace Course

Learn how to build the essential features for your online marketplace. Start creating the most essential features for your no-code marketplace and start scaling your site

Learn more →
Subscribe to the newsletter!

Get notified when I publish my next video or blog

😘 Got it!
Oops! Something went wrong while submitting the form.
Memberstack 2.0 - Is it worth switching?

Memberstack 2.0 - Is it worth switching?

Memberstack 2.0 is officially launched - I had a play with it to figure out whether or not it is worth switching from 1.0 to 2.0, how easy or hard it is to migrate Memberstack 1.0 sites to 2.0, and if what my thoughts are on alternative options like Webflow Memberships or Wized?

How I work within the limitations of No-code tools

How I work within the limitations of No-code tools

I shared some of my learnings of working within the limitations of the No-Code tools that I used to build Unicorn Factory.

How to build an online art gallery (without code)

How to build an online art gallery (without code)

In today's video, we are breaking down Art By Locals, an online art marketplace created with Webflow, Airtable and Zapier. I created this project over a week after we arrived in New Zealand to support the local art community in Alberta Canada.

How I built my freelancer portal with Webflow, Memberstack and Parabola

How I built my freelancer portal with Webflow, Memberstack and Parabola

In this video, I take you behind the scenes of the freelancer facing-side of the Unicorn Factory - the freelancer dashboard.

How to use Airtable Webhooks (w/ Webflow + Memberstack + Stripe)

How to use Airtable Webhooks (w/ Webflow + Memberstack + Stripe)

In today's video, we are going to be having a play around with incoming webhooks by Airtable Automations. Using Airtable Webhooks is a powerful way to automate workflows without having to use third-party tools like Zapier or Integromat.

How to create a mini course in Webflow

How to create a mini course in Webflow

How do you create a mini-course in Webflow? What are the tools that you need to use and what are the individual steps that you need to take in order to get your course up and running?