Enable and design a lock screen page to align with the style of your site.

If you’re still building your site, or want to limit access, you can hide your site, or specific pages behind a password. Doing so prevents your content from being publicly accessible. While your site or page is password-protected, a lock screen displays, and visitors need to enter a password to access it.

Tip: Consider monetizing your site's content by creating a member site.

Follow this guide to learn more about creating and customizing your lock screen.

Enabling a lock screen

Lock screens are available for both paid and trial sites.

To enable a lock screen:

1. Set a site-wide or ‌page-specific password.
2. Design and customize your lock screen. To learn more, review the sections below.
3. Share the password with anyone you want to preview your site.

Customizing your lock screen

To match your brand or site's style, you can create a custom design for the lock screen in the Design panel. A few instances where a customized lock screen could come in handy include:

• A photographer, creative professional, or agency using the lock screen to give clients access to private content.
• If you’re still working on your site or page, using the lock screen as an Under Construction page.
• Using a lock screen to create a private site or page for internal use only.

Here's an example of a lock screen used as an Under Construction page:

Design best practices

All lock screen layouts are built with responsive design so they look great on any device. However, there are some best practices to keep in mind when using a lock screen.

Keep it uncluttered

The lock screen is likely the first impression of your site. It should guide visitors toward a single action: entering a password. The layout options are purposely minimal for creating a design that makes an impact and functions quickly.

One lock screen for all pages

Your site has one lock screen design for all password-protected areas. It can’t be customized per page.

No blocks

Lock screens behave differently than the rest of Squarespace. Unlike other content areas, lock screens aren’t built using sections or blocks. You start with a pre-styled layout, and customize it with editing tools.

Watch a video

Choose a new layout

To choose a layout for your lock screen:

1. Open the Lock screen panel.
2. The panel opens with a preview of the lock screen so your changes appear in real time. You’ll start with a blank design.
3. Click Change layout to select a new layout for your lock screen. You’ll change the background image later, so focus more on the placement of the text and password fields now.
4. To choose a layout, hover over it and click Select.
5. Click Save.

Tip: You can add a countdown timer as a custom layout to the lock screen by adding custom code. To learn more, visit this post in the Squarespace Forum. Keep in mind, custom code modifications fall outside the scope of our support. This means we’re unable to help you set up or troubleshoot code-based solutions.

Add branding and text

Use the Branding Text panel to add content that matches your site's style. You can:

• Add branding text or a logo
• Add a page headline
• Add longer body text
• Hide or display the lock icon

To add a logo image:

1. Under Branding, choose Logo, then click the + icon
2. Upload an image from your device by clicking Upload file. You can reuse an image by clicking Select from library.
3. To confirm your changes, click Save.

Ensure your logo follows our best practices, or create a new logo with Squarespace Logo.

After adding an image, you can:

• Edit your image
• Set your image's focal point by clicking the three dots, then clicking Focal point
• Change the image by clicking Replace
• Delete the image by clicking the three dots, then clicking Remove

Keep in mind:

• Branding and text display varies by layout.
• It's not possible to display a logo and branding text at the same time.
• Unlike on other pages, site titles and logos on lock screens don't link to the site's homepage.
• The browser tab for a lock screen will always display your site title and the word "Secure."

Add background images or video

Use the Media panel to feature a full-bleed background image, video, or color on your lock screen. You can:

• Upload background images
• Add stock images
• Reuse previously uploaded images
• Add a looping, silent background video
• Set a background color

Keep in mind:

• Properly format your images before uploading.
• You can use the built-in image editor to edit the original images.
• You can upload multiple images to create a slideshow or grid background. Lock screen slideshows transition between images automatically.
• Uploading several high-resolution images can affect your lock screen's load time.
• Due to responsive design, images and videos will always crop to some degree, especially on mobile. The amount of cropping depends on the height of the image, the width of the browser, and the layout you've chosen.

Use a background color

To display a plain background color instead of an image or video, choose None. The image will disappear from the preview. Change the background color in the Style panel.

Style the lock screen

Use ‌the Style panel to change the lock screen's typography and colors. Lock screen styles are separate from the rest of your site's styles. Therefore, clicking Reset styles to defaults or Set all to system fonts will only affect your lock screen styles.

1. Click Style in the Lock Screen panel.
2. Use the options to style the lock screen. As you change the style using the tweaks in the panel, the preview of the lock screen will change.
3. When you’re done, click Save.

Note: It's not possible to style branding, headline, or body text on version 7.1 sites.

Password field

Use the tweaks in the Password section to adjust the password field.

If you choose Style: rectangle, you can adjust the background color and font color independently.

If you choose Style: underlined:

• The Color tweak affects both the underline and the text.
• The text displays 50% lighter than the underline.
• If your text is displaying as a color and you want it to be gray, move the selector from the right side of the color picker to the left.