Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

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.

Mira el video

Antes de comenzar

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 pantalla de bloqueo preestablecida es de color gris claro con un texto mínimo, el icono de un candado y una casilla para la contraseña.

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.
  • Si seleccionas Logotipo, arrastra y suelta un archivo de imagen en el cargador que aparece. Para crear un logotipo nuevo, prueba 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.

Lock Icon

El icono del candado significa que la página está protegida con contraseña. Marca o desmarca el icono del candado en Visualización para mostrarlo u ocultarlo.

Puedes cambiar el estilo del candado en el paso siguiente.

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.

Consejo: Puedes reutilizar una imagen de stock o una imagen cargada desde la ventana de Búsqueda de imágenes. 

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.


Cómo buscar imágenes de stock

Con nuestras integraciones de imágenes de stock, puedes agregar imágenes de stock gratuitas y premium directamente desde tu sitio.

Haz clic en la pestaña Imágenes, haz clic dentro del cargador y, luego, selecciona Buscar imágenes. Usa las herramientas de Búsqueda de imágenes para buscar, acceder a una vista previa y agregar una imagen de stock a tu miniatura. Para informarte mejor y empezar a utilizarlas, visita Buscar y agregar imágenes de stock.


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

Las pantallas de bloqueo tienen un estilo independiente de aquel de la plantilla del sitio. Usa el panel de Estilo para cambiar la tipografía y los colores de la pantalla.

  1. Click Style in the Lock Screen panel.
  2. 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.
  3. When you’re finished, click Save.

Password field

Use the tweaks in the Password section to adjust the password field.

Si eliges Estilo: Rectángulo, puedes ajustar el color de fondo y el color de la fuente por separado.

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:


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.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 98 de 183