Conditional Element Display ❺

Hide or show any element in Webflow, based on login state

In Dec 2022, Webflow has added an initial version of login-state element gating, however there are some incompatibility issues with components, and certain utility pages. This solution will remain available while those issues are being worked out.

Overview

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

You can currently;

• Show elements only when logged-in

• Show elements only when logged-out

SECURITY NOTE: This attributes-based approach only affects the visibility of the target elements, not their existence. Do not use this for secure information, as it cannot prevent users from accessing that content if they view source or disable scripts. Webflow's solution handles conditional visibility securely server-side, so you will want to utilize Webflow's native CV feature as soon as you are able to.

Future Plans

As of Jan-2023 here's the general feature map for Webflow's Membership access gating. Where known, Webflow's current or planned direction is shown.

Notes are given where the Sygnal Attributes ( SA ) project is considering development.

	Login/Logout	Access-Group	User-Specific
Static Pages	Webflow ( released )	Webflow ( released )	( no use case ) Excepting the /user-account page.
CMS Collection Pages ( all or none )	Webflow ( released )	Webflow ( released )	( no use case )
Elements	Webflow ( partial support ) SA ( stable, insecure )	Webflow under development, planned 1Q23	( no use case )
CMS Collection Items	( no use case ) Covered by ->	NEEDED Webflow - unknown SA - planned 1Q23	NEEDED Webflow - unknown SA - considering

Current SA priorities;

• Element gating

  • Add access-group-level gating

• Collection Item gating

  • Add access-group-level gating

  • Add User-level gating

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

First, add the library as detailed in Quick Start.

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

See above for details.