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.
Static Pages
Webflow ( released )
Webflow ( released )
( no use case ) Excepting the /user-account page.
CMS Collection Pages ( )
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 ->
Webflow - unknown SA - planned 1Q23
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
wfu-show-logged-in
attributeAdd 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
wfu-hide-logged-in
attributeAdd 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.
Last updated