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.
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:
- 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.
- 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 find the layout you want hover over it and click Select.
- Click Save.
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
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.
- Ensure your logo follows our best practices, or create a new logo with Squarespace Logo.
- Unlike on other pages, site titles and logos on lock screens don't link to the site's homepage.
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 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.
- Click Style in the Lock Screen panel.
- 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.
- When you’re finished, click Save.
Note: It's not possible to style Branding, Headline, or Body text on version 7.1 sites.
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.