Note: While our most popular guides have been translated into Spanish, some guides are only available in English.

Designing a lock screen

The lock screen displays when visiting a password-protected site or page. You can create a custom design for the lock screen in the Design panel.

All lock screen layouts prompt visitors to enter a password and are built with responsive design so they look great on any mobile device. We recommend building a custom design for your lock screen if you’re:

  • A photographer, creative professional, or agency - Use it to give clients access to private content.
  • Working on your site - Use it as an Under Construction page while you’re putting the finishing touches on your site or a page.
  • Creating private site or page - If your site or part of your site is for internal use only, you can match it to your brand.

Watch a video

Before you begin

Here are some best practices for using the lock screen.

Keep it simple

The lock screen is potentially 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 at this time.

No blocks

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

Default lock screen style

The default locks screen is light gray with minimal text, a lock icon, and a password field.

Step 1 - Go to the Lock Screen panel

To start building your custom design, in the Home Menu, click Design, and then click Lock Screen.

The panel opens with a preview of the lock screen so you can see changes in real time. You’ll start with a blank design.

Step 2 - Select a layout

Click Change Layout to select a new layout for your lock screen.

Browse the layout options to find one you like. You’ll change the background image later, so focus more on the placement of the text and password field now. When you pick a layout, hover over it and click Select. Then click Save.

Step 3 - Add branding and text

In the Lock Screen panel, click Branding & Text.


Select to display text (like a name or title) or a logo to represent your brand on the lock screen. It's not possible to display a logo and main text at the same time.

  • If you select Text, enter the main text for the screen.
  • If you select Logo, drag and drop an image file into the uploader that appears. To create a new logo, try Squarespace Logo.

Each layout displays this differently.



Enter a headline or message in the Headline field. Each layout presents the headline differently. You can use this field for a variety of purposes -- from your tagline to a phrase that entices visitors to log in or check back soon.


Enter and format longer text for the lock screen in the Body field. Each layout positions this text differently.

Tip: Leave this blank for a minimal look or use it to add any fine print.

Lock Icon

The lock icon shows the page is password-protected. Check or uncheck Display Lock Icon to show or hide it.

You can change the lock's style in the next step.

Click Save and then Lock Screen to continue.

Step 4 - Add background images or video

Every lock screen layout can feature a full-bleed background image, video, or color. You can also upload multiple images to create a slideshow. For tips on formatting images for a lock screen, visit Formatting your images for display on the web.

Tip: You can reuse a stock or uploaded image from the Image Search window. 

In the Lock Screen panel, click Media.

Add one image

Click the Images tab and drag an image into the image uploader. Click Save.

Create a slideshow / gallery

To create a gallery of images, click the Images tab, then drag multiple files into the uploader.

  • Lock screen slideshows transition between images automatically.
  • It isn’t possible to add navigation controls or control the transition speed in a lock screen slideshow.


Search stock images

With our stock image integrations, you can add free and premium stock images directly from your site.

Click the Images tab, click inside the uploader, and then select Search Images. Use the Image Search tools to search, preview, and add a stock image for your thumbnail. To learn more and get started, visit Searching and adding stock images.


Add a video

Click the Video tab, then paste your video's share URL into the Video URL field.

For help with the other settings in this panel, visit Adding a background video.


Use a background color (hide images)

To display a plain background color instead of an image, select None. The image will disappear from the preview. You can change the background color in the Style section.


Step 5 - Style

Lock screens are styled independently of a site’s template. Use the the Style panel to change the screen's typography and colors.

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

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:


Step 6 - Set passwords

After following the steps above, your lock screen is ready to use. Just set a site-wide or page password for any area you want to hide behind your new lock screen.

Was this article helpful?
105 out of 205 found this helpful