Habilita y diseña una página de pantalla de bloqueo para que se alinee con el estilo de tu sitio.

Si aún estás construyendo tu sitio o quieres limitar el acceso, puedes ocultar tu sitio o páginas específicas detrás de una contraseña. Hacerlo evita que tu contenido sea accesible públicamente. Mientras tu sitio o página está protegido con contraseña, aparece una pantalla de bloqueo y los visitantes deben ingresar una contraseña para acceder a ellos.

Consejo: Considera monetizar el contenido de tu sitio creando un sitio para miembros.

Sigue esta guía para obtener más información sobre cómo crear y personalizar tu pantalla de bloqueo.

Habilitar una pantalla de bloqueo

Las pantallas de bloqueo están disponibles tanto para sitios de pago como de prueba.

Para habilitar una pantalla de bloqueo:

1. Establece una contraseña para todo el sitio o para una ‌página específica.
2. Diseña y personaliza tu pantalla de bloqueo. Para obtener más información, revisa las secciones a continuación.
3. Comparte la contraseña con cualquier persona con la que deseas compartir una vista previa de tu sitio.

Personalizar tu pantalla de bloqueo

Para que coincida con el estilo de tu marca o sitio, puedes crear un diseño personalizado para la pantalla de bloqueo en el panel de Diseño. Algunos casos en los que una pantalla de bloqueo personalizada podría ser útil incluyen:

• Un fotógrafo, un profesional creativo o una agencia que usa la pantalla de bloqueo para dar a los clientes acceso a contenido privado.
• Si estás trabajando en tu sitio o página, usa la pantalla de bloqueo como página de "En construcción".
• Usar una pantalla de bloqueo para crear un sitio o página privada solo para uso interno.

Este es un ejemplo de una pantalla de bloqueo usada como página "En construcción":

Mejores prácticas de diseño

Todas las pantallas de bloqueo están diseñadas con un diseño adaptable, por lo que se ven bien en cualquier dispositivo. Sin embargo, hay algunas prácticas recomendadas para usar una pantalla de bloqueo.

Mantenla despejada

La pantalla de bloqueo es posiblemente la primera impresión de tu sitio. Debe guiar a los visitantes hacia una sola acción: introducir una contraseña. Las opciones de diseño son mínimas a propósito para crear un diseño que tenga impacto y funcione rápidamente.

Una pantalla de bloqueo para todas las páginas

Tu sitio tiene un diseño de pantalla de bloqueo para todas las áreas protegidas con contraseña. No se puede personalizar por página.

Sin bloques

Las pantallas de bloqueo se comportan un poco diferente al resto de Squarespace. A diferencia de otras áreas de contenido, las pantallas de bloqueo no se crean mediante secciones o bloques. Comenzarás con un diseño predeterminado y lo personalizarás con herramientas de edición.

Mira el video

Elegir un nuevo diseño

Para elegir un diseño para tu pantalla de bloqueo:

1. Abre el panel de Pantalla de bloqueo.
2. El panel se abre con una vista previa de la pantalla de bloqueo para que aparezcan los cambios en tiempo real. Empezarás con un diseño en blanco.
3. Haz clic en Cambiar diseño para seleccionar un nuevo diseño para la pantalla de bloqueo. Cambiarás la imagen de fondo más adelante, así que concéntrate más en la ubicación del texto y del campo para la contraseña ahora.
4. Para elegir un diseño, desplaza el cursor sobre él y haz clic en Seleccionar.
5. Haz clic en Guardar.

Consejo: Puedes añadir un temporizador de cuenta regresiva como diseño personalizado a la pantalla de bloqueo agregando código personalizado. Para obtener más información, visita esta publicación en el Squarespace Forum. Ten en cuenta que las modificaciones de código personalizado quedan fuera del alcance de nuestro servicio de atención al cliente. Esto significa que no podemos ayudarte a configurar ni resolver problemas de las soluciones basadas en código.

Añadir personalización de la marca y texto

Utiliza el panel Personalización de la marca y texto para agregar contenido que coincida con el estilo de tu sitio web. Puedes:

• Agregar texto de personalización de la marca o un logotipo.
• Agregar un título de página.
• Agregar un cuerpo del texto más largo.
• Ocultar o mostrar el ícono de bloqueo.

Para añadir una imagen de logotipo:

1. En Gestión de marca, seleccionar Logotipo y, a continuación, hacer clic en el ícono +
2. Cargar una imagen desde tu dispositivo haciendo clic en Cargar archivo. Puedes reutilizar una imagen haciendo clic en Seleccionar desde biblioteca.
3. Para confirmar los cambios, haz clic en Guardar.

Asegúrate de que tu logotipo siga nuestras prácticas recomendadas o bien, crea uno nuevo con Squarespace Logo.

Después de añadir una imagen, puedes:

• Edita tu imagen.
• Establece el punto focal de la imagen haciendo clic en los tres puntos y, a continuación, en Punto focal.
• Cambia la imagen haciendo clic en Reemplazar.
• Borra la imagen haciendo clic en los tres puntos y, a continuación, en Eliminar.

Ten en cuenta lo siguiente:

• La forma en la que aparecen la gestión de la marca y el texto varía según el diseño.
• No es posible mostrar el logotipo y el texto de la personalización de la marca al mismo tiempo.
• A diferencia de otras páginas, los títulos del sitio y los logotipos en las pantallas de bloqueo no vinculan a la página de inicio del sitio.
• La pestaña del navegador de una pantalla de bloqueo siempre mostrará el título del sitio y la palabra “Secure”.

Añadir imágenes de fondo o video

Utiliza el panel Contenido multimedia para mostrar una imagen de fondo sin bordes, un video o un color en la pantalla de bloqueo. Puedes optar por lo siguiente:

• Subir imágenes de fondo
• Agregar imágenes de stock
• Volver a utilizar imágenes que subiste antes
• Agregar un video de fondo silencioso y en bucle a través de una URL
• Seleccionar un color de fondo

Ten en cuenta lo siguiente:

• No es posible subir videos a una pantalla de bloqueo. Para agregar un video de fondo, sube tus videos a YouTube o Vimeo, luego usa la URL del video para agregar el video.
• Aplica un formato adecuado a tus imágenes antes de subirlas.
• Puedes utilizar el Editor de imágenes integrado para modificar la imagen original.
• Puedes cargar varias imágenes para crear una presentación de diapositivas o un fondo de cuadrícula. Las diapositivas de la pantalla de bloqueo hacen la transición entre imágenes automáticamente.
• Subir varias imágenes de alta resolución puede afectar el tiempo de carga de la pantalla de bloqueo.
• Debido al diseño adaptativo, las imágenes y los videos siempre se recortan en cierto modo, especialmente en los dispositivos móviles. La cantidad de recorte depende de la altura de la imagen, el ancho del navegador y el diseño que hayas elegido.

Usar un color de fondo

Para que aparezca un color pleno de fondo, en lugar de una imagen o de un video, elige Ninguno. La imagen desaparecerá de la vista previa. Cambia el color de fondo en el panel de Estilo.

Modificar el estilo de la pantalla de bloqueo

Usa el panel de ‌Estilo para cambiar la tipografía y los colores de la pantalla de bloqueo. Los estilos de pantalla de bloqueo son distintos del resto de los estilos de tu sitio. Por lo tanto, hacer clic en Restablecer estilos a los valores predeterminados o Establecer todos a las fuentes del sistema, solo tendrá efecto en los estilos de la pantalla de bloqueo.

1. Haz clic en Estilo en el panel Pantalla de bloqueo.
2. Utiliza las opciones para aplicar estilo a la pantalla de bloqueo. A medida que cambies el estilo usando los ajustes del panel, la vista previa de la pantalla de bloqueo cambiará.
3. Después de que hayas terminado, haz clic en Guardar.

Nota: No es posible aplicar estilos a gestión de marca, título o cuerpo del texto en los sitios de la versión 7.1.

Campo de contraseña

Utiliza los retoques de la sección Contraseña para ajustar el campo de contraseña.

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

Si eliges Estilo: Subrayado:

• El retoque Color afecta tanto al subrayado como al texto.
• El texto se muestra un 50% más claro que el subrayado.
• Si el texto se muestra como un color y deseas que sea gris, mueve el selector desde el lado derecho del selector de color hacia la izquierda.