Password protection — Webflow tutorial

Password protection — Webflow tutorial


Everybody knows the best passwords come from
a combination of your favorite pet and the last two digits of your birth year. For those wishing to implement this failsafe
method, there are a few ways to do it: We’ll cover adding a password to a page, adding
a password to a folder, adding a password to your whole project (or website), and finally,
designing your project’s password page. Let’s first start by censoring the password
we plan to use here, since it’s the same password Kyle uses on his Wells Fargo login. And we’ll copy the password to the clipboard. Over in the pages panel, we have a certain
page we don’t want accessible to everyone. Simply go into the settings for that page,
and enter the password. We’re just pasting the password we censored
before. Let’s save. And if we try to access this once the site
is published? We’re presented with the password protection
page. Note that you can use different passwords
for different pages. (You don’t have to use the same password.) But that’s how to set a password on a single
page. Let’s password-protect a folder. Same deal here. Want all the pages in a particular folder
to show a password prompt? Same deal. Go into that folder’s settings. Add a password. And that’ll apply to all the pages. Let’s save here again. If we try and access externally? Any of those pages in that folder? Access denied. Unless you have the password. Now page passwords and folder passwords can
be added or modified from the Editor — this means your clients (or whoever collaborates
on the project), can go in and add (or even change) a password to a page or a folder from
the pages panel in the Editor. That’s folder password protection. Let’s look at adding a password to the whole
project (or site). We get get to this from our project settings,
under General. If we scroll down a bit, there’s a spot
to enter or change a password for the entire project. Simply press Set password and then publish
the project. If we enter a password here and try to visit
any page that’s been published? Password. That’s adding a password to the whole project
(or website). Finally, we have password page itself. This design applies to any password-protected
page on your project. At the heart of it are two elements: the password
input field — and the button you press to submit. And what we’ll do is we’ll go over to the
element settings. Why? Because we have different options depending
on what’s selected. (When we select each of these elements, we
have different settings we can modify.) And with the parent element selected, we can
preview and modify or style not only the default state…but the wrong password state, too. And you can modify and style this page to
heart’s desire. Maybe a text link here which says “take me
back home.” Or a text block that shows Kyle’s passwords
in plaintext. So. Password-protected pages. We can add a password to a page, we can do
the same to a folder (which password-protects all pages inside that folder), as another
option, we can do all this from the Editor, and of course, we can customize and style
the password-protected page to fit our brand. And that’s…password protection.

3 Replies to “Password protection — Webflow tutorial”

Leave a Reply

Your email address will not be published. Required fields are marked *