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

Cómo diseñar una pantalla de bloqueo

Aparece una pantalla de bloqueo en un sitio o página protegido con contraseña. Puedes crear un diseño personalizado para la pantalla de bloqueo en el panel Diseño.

Todos los diseños de pantalla de bloqueo solicitan a los visitantes que introduzcan una contraseña y son adaptativos para que se vean perfectamente en cualquier dispositivo móvil. Te recomendamos crear un diseño personalizado para tu pantalla de bloqueo si:

  • Eres fotógrafo, profesional creativo o agencia: úsalo para dar a los clientes acceso a contenido privado.
  • Estás trabajando en tu sitio: úsalo como página en construcción mientras das los retoques finales a tu sitio o página.
  • Estás creando una página o sitio privado: si tu sitio o parte de tu sitio es solo para uso interno, puedes asociarlo con tu marca.

Mira el video

Antes de comenzar

Estas son algunas de las prácticas recomendadas para usar la pantalla de bloqueo.

Simplifica

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

Elegir un nuevo diseño

Para empezar a crear tu diseño personalizado:

  1. En el menú de Inicio, haz clic en Diseño y, a continuación, en Pantalla de bloqueo.
  2. El panel se abre con una vista previa de la pantalla de bloqueo para que puedas ver 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.
  4. Examina las opciones de diseño para encontrar uno que te guste. Cambiarás la imagen de fondo más adelante, así que concéntrate más en la ubicación del campo de texto y contraseña ahora. 
  5. Cuando encuentres el diseño que deseas, coloca el cursor sobre este y haz clic en Seleccionar.
  6. Haz clic en Guardar.

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.

Ten en cuenta lo siguiente:

  • La forma en la que aparecen la personalizació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.
  • Asegúrate de que tu logotipo siga nuestras prácticas recomendadas o bien, crea uno nuevo con el logotipo de Squarespace.
  • 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.

Añadir imágenes de fondo o video

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

Ten en cuenta lo siguiente:

  • 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.
  • Cargar muchas 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. Cuánto se recortará 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 de fondo liso, en lugar de una imagen o video, elige Ninguno. La imagen desaparecerá de la vista previa. Cambia el color de fondo en el panel Estilo.

Modificar el estilo de la pantalla de bloqueo

Utiliza el panel Estilo para cambiar la tipografía y los colores de la pantalla de bloqueo. Los estilos de la pantalla de bloqueo son independientes del resto de estilos del sitio.

  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 ajustas el estilo usando los retoques del panel, la vista previa de la pantalla de bloqueo cambiará.
  3. Luego de que hayas terminado, haz clic en Guardar.
Nota: No es posible aplicar estilos a Personalización de la 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.

Establecer una contraseña

Después de seguir los pasos anteriores, la pantalla de bloqueo está lista para utilizarse. Asegúrate de establecer una contraseña de todo el sitio o de la página para cualquier área que quieras ocultar detrás de tu nueva pantalla de bloqueo.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 109 de 215
Cómo diseñar una pantalla de bloqueo