Las páginas de portada presentan la información en una pantalla de bienvenida única y llamativa. Son ideales para mostrar una página “En construcción”, anunciar un lanzamiento de producto o recopilar direcciones de correo electrónico de quienes visitan el sitio.

Las páginas de portada están disponibles en cualquier plan de facturación para sitios web y Commerce en la versión 7.0. Si actualmente estás en el plan Página de Portada independiente, la página se mantendrá activa mientras la facturación esté activa. No es posible volver al plan de facturación de una Página de Portada independiente después de actualizar a un sitio completo.

Las páginas de portada no están disponibles en la versión 7.1. Para crear un aspecto similar, puedes ocultar el encabezado y el pie de página en ciertas páginas. No puedes agregar ni editar páginas de portada en la aplicación de Squarespace.

Mira el video

Agregar una página de portada

Sigue estos pasos para agregar una Página de Portada y personalizar sus contenidos:

1. Abre el panel de Páginas, haz clic en + y luego selecciona Página de portada. Para obtener más ayuda, visita Cómo agregar páginas a la navegación.
2. Elige un diseño.
3. Añade marca, texto y medios.
4. Añade acciones, como botones, enlaces o formularios.
5. Dar estilo a la página.

Ten en cuenta lo siguiente:

• Para establecer la página de portada como la primera página que los visitantes ven cuando visitan tu sitio web, configúrala como página de inicio.
• Para eliminar la Página de portada de los menús de navegación, muévela a la sección No enlazadas del panel de Páginas. Esto resulta útil si solo quieres que los que visitan el sitio vean la página una vez antes de ingresar a tu sitio o si la usarás como una página de aterrizaje separada.
• Si está utilizando solo el plan Página de Portada, no tienes un panel Páginas y no es posible agregar más páginas. El menú de inicio muestra los paneles para editar la página de portada independiente.

Diseños de Páginas de Portada

Cada diseño de página de portada actúa como una plantilla de una página, con sus propias características y configuraciones de estilo. Las páginas de portada no utilizan bloques y los elementos de diseño, como el texto y los botones, se muestran en una posición fija. Esto ayuda a que tu página de portada siga siendo atractiva y adaptable.

Nota: las Páginas de Portada no admiten HTML ni formatos Markdown.

Para cambiar el diseño:

1. En el menú Página de Portada, haz clic en Cambiar diseño.
2. Utiliza el menú desplegable para ordenar los diseños por categoría o elige Todos los diseños para ver todos.
3. Desplaza el cursor sobre un diseño y haz clic en Seleccionar para establecerlo como tu nuevo diseño.
4. Haz clic en Guardar en la parte superior de la página para aplicar el cambio.

Aunque puedes adaptar los diseños de la Página de Portada para cualquier propósito, los hemos creado pensando en temas generales. Obtén más información sobre cada categoría de diseño a continuación.

Añadir personalización de la marca y texto

Usa el panel de Personalización de la marca y texto para añadir lo siguiente:

• Un logotipo o el texto de la personalización de la marca
• Un lema para la página
• El cuerpo del texto

Estas configuraciones funcionan con el estilo de tu diseño para permitirte presentar una cantidad mínima de información con máximo impacto.

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 Squarespace Logo.
• A diferencia de otras páginas, los títulos del sitio y los logotipos de las páginas de portada no vinculan a la página de inicio del sitio.
• El texto de tu marca puede ser diferente del título de SEO, que sirve como nombre de página en las pestañas del navegador y en los resultados del motor de búsqueda.

Agregar medios

Usa el panel de Medios para lo siguiente:

• Subir imágenes de fondo
• Agregar imágenes de stock
• Volver a utilizar imágenes que subiste antes
• Añadir un video de fondo que se reproduce automáticamente
• Seleccionar un color de fondo

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 subir varias imágenes para crear un fondo en diapositivas o en cuadrícula.
• Subir una gran cantidad de imágenes en alta resolución puede afectar el tiempo de carga de tu Página de Portada.
• La mayoría de los diseños admiten videos de fondo que se reproducen continuamente en silencio con una URL de YouTube o Vimeo.
• No es posible añadir controles de navegación ni modificar la velocidad de transición en las presentaciones de la Página de Portada.
• 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.

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

Añadir acciones

Utiliza el panel Acción para agregar botones, enlaces de navegación y una opción de formulario o registro para newsletter. Si no deseas realizar ninguna acción en la página de portada, deja los campos en blanco.

Ten en cuenta lo siguiente:

• Puedes agregar botones o enlaces de navegación, pero no ambos al mismo tiempo.
• Puedes añadir hasta dos botones o cinco enlaces de navegación.
• Puedes agregar un formulario o un registro para la newsletter.

Para agregar una acción:

1. Presiona Acción en el menú de la Página de Portada.
2. En Seleccionar tipo de acción, elige una acción.

Agregar botones o enlaces de navegación

Los botones y los enlaces de navegación dirigen a los visitantes a otra página de tu sitio de Squarespace, a un sitio web distinto o a un archivo para descargar. Para agregar botones o enlaces de navegación, sigue estos pasos:

1. Elige Botones o Navegación en el menú Seleccionar tipo de acción.
2. Añade un rótulo en el primer campo. Te recomendamos que el texto del rótulo del enlace sea breve para un mejor formato y legibilidad.
3. Haz clic en la casilla de la URL para ingresar una dirección web o en para abrir el editor de enlaces. Puedes enlazar con sitios externos, archivos para descargar, direcciones de correo electrónico, números de teléfono o el contenido de tu propio sitio. Para obtener más información, visita Agregar enlaces a tu sitio.
4. Haz clic en Guardar, en la parte superior del panel para publicar todos los cambios.

Agregar un formulario o registro para newsletter

Los que visitan el sitio pueden presionar un botón y completar el formulario o un registro para la newsletter que se abre en una superposición. Para añadir un formulario o un registro para la newsletter:

1. Selecciona Formulario o Newsletter en el menú Seleccionar tipo de acción.
2. Agrega una etiqueta de botón en el campo Etiqueta de botón.
3. Presiona Editar el formulario o Editar el registro para la newsletter para crear el contenido.
4. Para los formularios, puedes agregar un nombre para tu formulario en el campo Nombre del formulario. El nombre aparece a tus visitantes cuando el formulario se abre en lightbox. No es posible dar un nombre a los newsletters o eliminar el título predeterminado del “formulario de newsletter” que aparece en lightbox para ellos.
5. Para los formularios, puedes borrar los campos de posicionamiento con un clic en los iconos de la papelera y un clic en +, en la parte inferior para añadir campos nuevos. Si quieres exigir que los que visiten el sitio completen un campo para enviar el formulario, marca Obligatorio. Los registros para la newsletter solo tienen un campo para la Dirección de correo electrónico.
6. Haz clic en la pestaña Almacenamiento para indicarnos a dónde hacer los envíos. Si utilizas una lista de distribución de correo de Email Marketing como opción de almacenamiento, los suscriptores recibirán un correo electrónico de confirmación cuando se registren. No es posible desactivar esto.
7. En la pestaña Avanzado, puedes personalizar el rótulo del botón de enviar, configurar un redireccionamiento después del envío y editar el mensaje que aparece para quienes visitan el sitio después de que han enviado el formulario. Usa texto normal o HTML.
8. En el editor, haz clic en Guardar y, luego, en Guardar, en la parte superior del panel para publicar todos los cambios.

Consejo: Después de conectar el formulario o el registro para la newsletter con el almacenamiento, te recomendamos visitar la versión en vivo de tu página y enviar un formulario de prueba para ver cómo funciona.

Añadir un color de fondo para el formulario

En la mayoría de los diseños, puedes usar el ajuste Color de superposición personalizado en el panel Estilo para añadir un color de fondo a tu formulario o registro para la newsletter. Si deseas ocultar esta superposición del resto de tu página, usa el control deslizante de opacidad para hacerlo transparente. Quienes visiten el sitio verán la superposición después de que hagan clic en el formulario o en el botón de registro para la newsletter.

Ten en cuenta lo siguiente:

• El diseño Harbor no incluye una configuración de Color de superposición personalizado o Color detrás del texto. Los fondos del formulario o de registro para la newsletter de Harbor siempre serán de color gris claro.
• En algunos diseños, la opción Color de superposición personalizado solo aparece después de agregar imágenes al panel Medios.

En estos diseños, el fondo del formulario o registro para newsletter coincide con la configuración Color detrás del texto:

• Backstory
• Tarjeta
• Flagship
• Flash
• Focus
• Monocle
• Session
• Destacado
• Vignette

Ocultar el formulario

Para ocultar el formulario o el registro para la newsletter, borra todo el texto del Rótulo del botón y deja la casilla en blanco. Los campos del formulario permanecen intactos si lo vuelves a habilitar más tarde.

Añadir íconos sociales

Para que aparezcan los iconos de las redes sociales, haz clic en Enlaces de las redes sociales del menú de Página de Portada y marca Mostrar iconos de redes sociales. Los iconos de redes sociales muestran las cuentas que has añadido en el Panel de enlaces a redes sociales. La colocación de los iconos varía según el diseño pero, por lo general, aparecen cerca de la parte inferior del sitio.

Cambiar el estilo de la Página de Portada

Haz clic en Estilo en el menú de la página de portada para personalizar el diseño. Cada página de portada tiene opciones de estilo exclusivas, independientes de la plantilla de tu sitio y de otras páginas de portada.

Ten en cuenta lo siguiente:

• Si cambias el diseño, todas las configuraciones de fuente, color y tamaño se restablecerán a los valores predeterminados del diseño. Si cambias a un diseño utilizado anteriormente, los ajustes de estilo también se restablecerán.
• Dado que las páginas de portada tienen un diseño adaptativo, se verán un poco diferentes en los dispositivos móviles. Puedes obtener una vista previa de cómo aparecerá tu página en dispositivos móviles mediante la vista en dispositivo.

Cambiar retoques de estilo

En el menú Página de Portada, haz clic en Estilo. Utiliza los retoques de estilo para personalizar tu página de portada. A medida que realizas cambios, la vista previa de la página se actualiza. Te recomendamos que pruebes con todos los diseños para encontrar uno que te guste.

A continuación, se muestra una lista de los retoques comunes de la Página de Portada:

• Posicionamiento: posiciona el contenido en la página. Según el diseño, las opciones son Izquierda, Centro, Derecha o Superior, Medio, Inferior.
• Personalización de la marca: establece la fuente y el color.
• Encabezado: establece la fuente y el color.
• Cuerpo: establece la fuente y el color.
• Fondo: establece el color de fondo (visible si no se utiliza una imagen o un video) y las opciones del borde de la página.
• Imágenes (no disponibles en los diseños de ubicación): establece el estilo como completo o cuadrícula y personaliza el aspecto de la cuadrícula con ajustes de estilos como Densidad de galería en cuadrícula y Relación de galería en cuadrícula. Selecciona Color de superposición automática y Color de carga automática o anula la selección y establece los colores para cada una. Consulta más información sobre Carga de color a continuación.
• Botones: establece la fuente, el estilo y el color de cualquier botón.
• Íconos de redes sociales: establece el estilo y el color de los íconos de redes sociales.
• Controles de audio (solo diseños de audio): establece el estilo del reproductor, y la fuente y el color de las pistas.
• Controles de video (solo diseños de video): establece el estilo y el color del reproductor.
• Mapa (solo diseños de ubicación) : establece el estilo de mapa.

Imágenes de fondo

La mayoría de los diseños incluyen opciones de imágenes completas y de cuadrícula:

• Selecciona Completo para llenar todo el fondo de la Página de Portada con una sola imagen. Si subes varias imágenes, se mostrará una imagen a la vez como una diapositiva.
• Selecciona Cuadrícula para crear una cuadrícula de fondo con imágenes repetidas. Si tienes una imagen, la cuadrícula repetirá esa imagen para llenar el espacio.
  
  • La opción Cuadrícula no está disponible en los diseños Focus, Flagship, Harbor o Monocle.
  • En el diseño Montage, la barra de contenido puede cubrir algunas de las imágenes.
• Utiliza los ajustes que aparecen a continuación para establecer la relación de aspecto, la orientación de la imagen y mucho más.

Color de carga

La mayoría de los diseños de página de portada ofrecen una opción de color de carga para que puedas mostrar un color de fondo independiente mientras se carga el color de fondo normal o la imagen. También puedes ver este color al hacer una transición a través de imágenes en una diapositiva.

Nota: los diseños Flagship, Focus, Harbor y Monocle no ofrecen un color de carga.

De forma predeterminada, el diseño utiliza el Color de carga automático. Esto significa que el color se basa en el color de fondo de la imagen o el video. Si tienes varias imágenes de fondo, el color de carga se basa en la primera imagen del panel Medios.

Para elegir tu propio color, desmarca Color de carga automático y define uno nuevo haciendo clic en Color de carga personalizado.

Para deshabilitar el color de carga, haz clic en Color de carga personalizado y activa la opción Transparente.

Color de superposición

Todos los diseños, excepto Harbor, ofrecen una opción de color de superposición, que agrega un tono tenue a tu imagen de fondo o color. De forma predeterminada, el diseño utiliza el color de superposición automático. El color automático suele ser un tono de gris que complementa tu imagen precargada.

Para utilizar un color de superposición personalizado, desmarca Color de superposición automático, haz clic en Color de superposición personalizado y elige un color nuevo.

Para utilizar el color de superposición personalizado como color de fondo del formulario, pero que quede oculto del resto de la página, utiliza el control deslizante de opacidad para que el color sea transparente.

Preguntas frecuentes

¿Por qué no puedo aumentar el tamaño del texto más allá de cierto punto?

El texto, los logotipos y los botones de la Página de Portada solo pueden agrandarse hasta el ancho máximo permitido por cada diseño. Estos límites impiden que se superpongan los contenidos y aseguran un diseño adaptativo.

Más específicamente, el cuerpo del texto muestra el tamaño de fuente establecido cuando el ancho del navegador es superior a 1,800 píxeles. Para navegadores de 1,800 píxeles de ancho y más pequeños, la fuente del cuerpo alcanza un tamaño máximo dependiendo del ancho:

• 1,800 píxeles de ancho: 27 px
• 1,600 píxeles de ancho: 22 px
• 1,020 píxeles de ancho: 18 px
• 760 píxeles de ancho: 17 px
• 600 píxeles de ancho: 16 px

Por ejemplo, si configuras el tamaño del cuerpo de la fuente en 30 px, solo aparecerá en 30 px cuando la ventana del navegador de quien visita el sitio tenga, por lo menos, 1801 px de ancho. De lo contrario, se reajustará según la lista anterior. Del mismo modo, si configuras el tamaño del cuerpo de la fuente en 13px, siempre aparecerá en 13 px porque ese tamaño es menor que cualquiera de sus límites.

La personalización de la marca y el texto del encabezado funcionan de manera diferente. El tamaño de fuente funciona más como destino, y el texto se ajusta a escala en función del alto y ancho del navegador. Este ajuste varía de un diseño a otro.

¿Puedo agregar código personalizado a una página de portada?

Las páginas de portada tienen diseños muy intencionales y no están creadas para agregar CSS personalizado. Para ajustar el estilo de tu página de portada (como fuentes y colores), utiliza el panel Estilo.

Si aún necesitas añadir HTML o scripts, usa la configuración de la Página de Portada para añadir Inserción de código por página. Si necesitas más ayuda, visita Añadir código personalizado en tu sitio.

El botón de reproducción cambia de posición en el diseño Proyector.

La ubicación del botón de reproducir en el diseño Projector depende de la cantidad de texto en el campo Cuerpo:

• Con una pequeña cantidad de texto, el botón de reproducción permanece centrado.
• Cuando el texto excede cierto ancho, el botón de reproducir se mueve a la esquina superior izquierda.
• La posición varía según el tamaño del navegador.