Nota: Sebbene le nostre guide più popolari siano state tradotte in italiano, alcune guide sono disponibili solo in inglese.
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.

Guarda un video

Prima di iniziare

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

La schermata di blocco predefinita è grigio chiaro con testo minimale, un'icona di blocco e una casella per la password.

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

L'icona del lucchetto indica che la pagina è protetta da password. Seleziona o deseleziona Visualizza icona lucchetto per visualizzarla o nasconderla.

Puoi cambiare lo stile del lucchetto nel passaggio successivo.

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

Cercare immagini di archivio

Con le nostre integrazioni di immagini di archivio, puoi aggiungere immagini di archivio gratuite e premium direttamente dal tuo sito.

Clicca sulla scheda Immagini, clicca all'interno dell'uploader, quindi seleziona Cerca immagini. Utilizza gli strumenti di Ricerca immagini per cercare, visualizzare in anteprima e aggiungere un'immagine di archivio per la miniatura. Per maggiori informazioni e per iniziare, visita Cercare e aggiungere immagini di archivio

lock_screen_-_search_images.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

Lo stile delle schermate di blocco sarà indipendente dal modello del sito. Nel riquadro Stile, puoi modificare la tipografia e i colori usando tweak simili a quelli del riquadro Stile siti.

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.

Questo articolo ti è stato utile?
Utenti che ritengono sia utile: 91 su 168
Designing a lock screen