How To Hide and Show Elements in Memberstack

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!

‍