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

Designing a lock screen

A lock screen displays on 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.

No blocks

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

Choose a new layout

To start building your custom design:

  1. In the Home menu, click Design, and then click Lock screen.
  2. 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.
  3. Click Change layout to select a new layout for your lock screen.
  4. 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.
  5. When you find the layout you want hover over it and click Select.
  6. 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 or add image effects
  • 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:

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 a large number of 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 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.

  1. Click Style in the Lock Screen panel.
  2. Use the options to style 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.
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.

Set a password

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

Was this article helpful?
129 out of 269 found this helpful