The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
This video features an old UI. Updated version coming soon!

When you set a Website password or a password for individual pages and folders, your site visitors will see a password protection page before they can access your site. You can customize the design of this password protection page just as you would customize the design of any other page.

The default style of your passoword page.
Your password page looks like this by default, but you can customize the design like any other page.
Need to know
Website password
and Page and folder password protection are premium features. Your site must have an active hosting subscription. If you're on the Pro plan, you can also set site wide passwords on your webflow.io staging sites.
Learn all about password protection, check out the guide called: Password protecting your site or web pages
In this lesson
  1. Access the password page
  2. Style the password page

Access the password page

Your customizable password page is located in your Pages Panel, under the Utility Pages section.

The password page is located under the utility pages section of your Pages Panel.
Pages panel → utility pages → password

Anatomy of the password page

By default, your password page comes with a centered set of elements, which you can customize however you'd like. 

A view of the elements that are included in your password page by default.
‍Your password page comes with a set of pre-styled elements, which you can customize however you'd like.
Password form settings

When you've selected the utility page form element on the canvas, you can access the Password form settings in the Element settings panel. Here, you can toggle the shown state of the form between the default state and the wrong password state. This allows you to access and customize the "wrong password" message. Learn more below.

Good to know 
Password protected pages are excluded from search by default.

Styling the password page

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.

Customize your password page to match the rest of your site.

Styling the Error message

You can style the "error message" site visitors see if they enter the wrong password. To edit the wrong password mode:

  1. Select the div with class Utility Page Content
  2. Go the the Elements Settings Panel
  3. Switch to the "Wrong password" state under Password Form Settings
  4. Style the Error Message
Style the error state by switching states under the form settings.
Need to know
Even if you're using password protection, your site/page(s) may come up in search results on the web, if you've previously published the site or page(s) before setting password protection. However, people won’t be able to access actual page content without the password. Also, browsers will try to remember log-in credentials. So, if you log in once, and aren’t asked for credentials later, it’s probably because your browser has saved your username and password.