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.

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 grey with minimal text, a lock icon, and a password box.

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.

design_-_lock_screen.jpg

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 box 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.

Branding

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.

branding_-_text_or_logo.jpg

Headline

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

Body

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

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

Lock Icon

Check or uncheck Lock Icon to show or hide a lock image. The lock icon is a helpful visual indicator of a password-protected page.

You can change the style of the lock 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.

In the Lock Screen panel, click Media.

choose_media.jpg

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.

choose_images.jpg

Search Getty Images

With our partnership with Getty Images, you can purchase a stock image for your lock screen for $10.

Click the Images tab, click inside the uploader, and then select Getty. Use the Getty tools to search, preview, and purchase a stock image for your thumbnail. To learn more and get started, visit Getty Images and Squarespace overview.

choose_getty.jpg

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.

choose_video.jpg

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.

choose_none.jpg

Step 5 - Style

Lock screens are styled independently of a site’s template. In the Style panel, you can change the typography and colors using similar tweaks as the Style Editor.

Click Style in the Lock Screen panel.

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.

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:

password-text.gif

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?
62 out of 103 found this helpful
Designing a lock screen