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