This feature lets you add styling to an element (or lots of elements) on your published site.
This is especially useful when you want to set your members only content, verification UI, trial UI, etc. to be hidden by default. See the example scenario below to learn more.
If you'd prefer to apply an entire class instead, please see the article for data-ms-bind:class.
The Attribute
data-ms-bind:style="cssProperty:value"
Example Scenario
Let's say we have a banner which is only visible if a member has a failed payment. So I've given it the attribute data-ms-content="has-failed-payment"
. Since most of my member's will rarely see this, I want to hide the banner in Webflow. If I also give it the attribute data-ms-bind:style="display:block"
then Memberstack will set the element to display block when it's needed 🎉
Hide Content by Default
You can use this feature to default-hide gated content, banners, alerts, and other data-ms-content. To set the display state on your published site you can use display:block
, display:flex
, display:inline
, display:inline-block
, etc.
Other Styling
And that's not all! You could update any CSS property (like color, height, opacity, etc.) using the appropriate Style Object Property.
Note: You can only apply one style property per element. e.g. display OR color. height OR width. If you need to update multiple style properties, please see the article for data-ms-bind:class.
Here are some examples to get you started:
backgroundImage:url('img.png')
cursor:pointer
opacity:1
transform:translate(10px, 10x)
zIndex:100
View the full list of Style Object Properties
Comments
0 comments
Please sign in to leave a comment.