Sometimes you'd want to hide your web content from web surfers. You can do that by not publishing your content, or saving pages as a draft. However, if you wish to share the content with specific people, you can password-protect it.
If you're hosting your site with Webflow, you can protect your entire site or specific pages on your site. You can also customize the design of your password page.
In this lesson:
- Password protect individual pages
- Password protect all pages in a folder
- Password protect all pages of a Collection
- Password protect your entire website
- Design your site’s password page
Password protect individual pages
You can set unique passwords for each page you password protect so that each password-protected page can have its unique access credentials.
Password protect pages that you want to share with your clients or a specific audience. These can be internal documentation, sensitive client prototypes, or any page you'd like to restrict access to. For pages that you do not need to share privately, save them as a draft instead.
Set a password on a page
To set a page-level password, enable Password protection in the Page's settings in the Designer or the Editor. Then set a unique password for that page and publish your site.
Password-protect a page through the Designer.
Password-protect a page through the Editor.
Password protect all pages in a folder
To hide the content of multiple pages at a time, you could set a password on each page, or you can add the pages to a folder and set a password for the entire folder.
Each folder of pages can have its own, unique password, just as all pages can have their own passwords. Child pages and folders will inherit the password of their parent folder. These child items cannot have individual passwords if their parent folder has one set. So, setting a folder-level password will overwrite passwords previously set on pages or folders within that folder.
Set a password on a folder
To set a folder-level password in the Designer or Editor, enable Password protection in the Folder settings. Type in your unique password that will apply to all pages in that folder. Publish your site.
Password protect all pages of a Collection
As for Collection pages, you can password protect the Collection template page, and all auto-generated pages in that Collection will display the password page and require login credentials. This way, you can hide pages of a Collection that you're still designing.
Set a password on a Collection template page
To set a password on all pages of a Collection, enable Password protection in the Page settings of that Collection template page in the Designer. Then set a unique password that you'll need to enter to visit any page in the Collection. Publish your site.
To password-protect Collection pages in the Editor, set the password on any page from that Collection. The password will apply to all pages within that Collection.
Password protect your entire website
What if you want to publish your site for testing or private demos? You can control who can access a project that is still a work-in-progress by requiring a password on all of its domains.
Site password protection is available on all hosted sites as well as on all projects if you're on a Pro plan or Team plan.
Set a password on your entire site
You can access the Website password settings under the General tab of your Project settings. To set a site-wide password, enable Password protection in your project's settings, set a password, and publish your site.
Setting a site-wide password will overwrite passwords set on pages or folders within that project.
Design your site’s password page
Site visitors who stumble upon a Password protected URL will see a password page and will need to enter the password you set before proceeding.
Access the password page
You can customize the design of your password page in the Designer. You can access this utility page through the Pages panel or using Quick find.
Customize and style the password page
By default, your password page comes with a centered set of elements, which you can customize however you'd like. You can delete and rearrange most of the default elements on your password page, except for the input form and submit button, which cannot be deleted. You can also add new elements to the page and style those however you'd like.
You can also style the "error message" site visitors see if they enter the wrong password. Select the utility page form element on the canvas and open the Element settings panel. There, toggle the state of the form under Password form settings to the "wrong password" state to reveal the Error message on the canvas. Select, customize, and style it.
