Webflow Membership + Conditional Elements


Webflow Membership + Conditional Element Display

This is likely a temporary solution, as Webflow is building this feature into Memberships natively.

This feature allows you to hide/show elements based on the logged-in / logged-out state of the current user.

You can;

  • Show elements only when logged-in
  • Show elements only when logged-out

IMPORTANT: This only affects visible display, it does not prevent users from accessing that content if they view source.

Usage Notes

wfu-show-logged-in attribute

Add the wfu-show-logged-in custom attribute (no value needed) when you want an element to only appear to logged-in users.

wfu-hide-logged-in attribute

Add the wfu-hide-logged-in custom attribute (no value needed) when you want an element to only appear to NON-logged-in users.

Getting Started ( NOCODE )

STEP 1 - Add the Library

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

Add this CSS script to the HEAD of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/dist/css/webflow-membership.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@4.11/src/nocode/webflow-membership.js"></script>

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.