How to hide/show page content (using data attributes) in Webflow
Warning: This guide is for people comfortable with HTML.
However, there are situations where you want to hide/show entire sections or specific elements of a page depending on various factors e.g. Is the user logged in? Are they on Plan A? Are they a free or paid member?
With MemberSpace's data attribute functionality, you can accomplish exactly that!
Here is our developer help doc, but below we'll give a few simple examples you can follow.
- Say you want to show an up-sell button only for free members encouraging them to join a paid plan. To do that, add the following data attribute to the button:
- Say you want to hide a sign up banner image so only visitors who are NOT logged in see it. To do that, add the following data attribute to the banner image:
- Say you want to hide an external link for members on a specific plan (e.g. plan id 111). To do that, add the following data attribute to the link:
Adding Data Attributes to Elements on a Webflow Site
You can add data attributes to any element on your Webflow website by following the below steps. In this example, we'll edit existing elements in the top navigation.
- Make sure you are logged into your Webflow backend.
- Edit your site > click any element to display the settings on the right > click the settings icon at the top.
Next, scroll down and click the "+" icon under "Custom Attributes" > fill in the data attribute Name and Value fields. In this example, we'll choose to hide the "Sign In" button from members who ARE logged in but show it to website visitors who are NOT.
After, be sure to click "Save" and publish your changes at the top.Now, when a website visitor is NOT logged in, they will see the "Sign In" button at the top.
However, if the visitor IS logged in to their MemberSpace account, the button will be hidden.
Next, we'll edit the "Existing Member" button so it will be hidden from visitors who are NOT logged in but shown to members who ARE.
Repeat the above steps. However, for Step 3, we'll slightly alter the data attribute. Now, when a member IS logged in, they will see the "Existing Member" button at the top.However, if the website visitor is NOT logged in to their MemberSpace account, the button will be hidden.
Use this Webflow membership template to quickly build a great-looking membership site and/or online course. Then, use the pre-built course dashboard to insert your content and launch!