Password protected pages

In the Website Editor, you can protect individual pages from unauthorized access with a password. In this article, we'll show you how to set this up.

Table of contents

• Basic knowledge
• Password protect a page
• Customize the design of the password page

Basic knowledge

Even with publicly accessible websites, it is possible that certain pages need to be protected against unauthorized access. These can be pages that are for employees only or pages that are under construction and feature new designs or content that aren't ready to be made public. With the Website Editor, you can protect individual pages with a password easily.

Password protect a page

To set a password for a specific page, open the page settings by clicking on Pages at the top of the Website Editor. The settings for all pages and subpages of the website are displayed in the menu on the right. 

Open the cog icon and click on the downward arrow to open More Settings. You can now enter the password for the respective subpage in the Password field. The orange lock in front of the name quickly indicates which pages are password-protected.

Then, save the project so that the change is applied. This may take a little longer than usual. When you access the password-protected page online, the following message will be displayed once the change has been applied:

Customize the design of the password page

For security reasons, the design of the password page can only be adjusted with CSS and not with the editor. To do this, you can set CSS defaults for the .ed-protection class. For example, the following code would center the password prompt on the page.

.ed-protection {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}