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

Páginas de Portada

Las páginas de portada presentan información en una sola página en negrita. Son ideales para mostrar una página “En construcción”, anunciar un lanzamiento de producto o recopilar direcciones de correo electrónico de los visitantes.

Las páginas de portada están disponibles en cualquier plan de facturación del sitio 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. Ya no es posible volver a este plan después de cambiar a un sitio completo.

Las Páginas de Portada no están disponibles en la versión 7.1.

Mira el video

Agregar una Página de Portada

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

  1. En el menú de Inicio, haz clic en Páginas y luego en el ícono + , y selecciona Página de Portada. Para obtener más ayuda, consulta 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 vinculadas 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. 

Utiliza estos diseños para una página personal o de negocios, una página “Próximamente” o una página de registro para un boletín:

  • Tarjeta
  • Cubrir
  • Flash
  • Gazette
  • Jacket
  • Mission
  • Revelar
  • Destacado
  • Trade

Utiliza estos diseños para un perfil personal centrado en texto o para resaltar imágenes en negrita:

  • Backstory
  • Focus
  • Monocle
  • Montage
  • Retrato
  • Prism
  • Silhouette
  • Snapshot
  • Vanguard
  • Vignette

Utiliza estos diseños para resaltar pistas de audio de un músico o banda, o compartir un episodio de podcast:

  • Broadcast
  • Registro
  • Session
  • Productos

Para agregar pistas de audio, haz clic en Audio en el menú Página de Portada y, a continuación, arrastra un .mp3 al cargador Agregar pista. Para crear una lista de reproducción, arrastra y suelta varios archivos .mp3. Las páginas de portada admiten archivos .mp3 de hasta 20 MB por pista.

Utiliza estos diseños para compartir una película, tráiler u otro video:

  • Debut
  • Premier
  • Projector
Consejo: la mayoría de los diseños también admiten videos de fondo utilizando una URL de YouTube o Vimeo.

Para insertar un video, haz clic en Video en el menú Página de Portada. A continuación, sigue nuestros pasos para agregar un video, ya sea mediante el enlace directo o el código para insertar.

Con un video insertado, aparece un botón de reproducción en la página. Cuando el visitante hace clic en este, el video se abre en lightbox.

Al insertar un enlace de video, no se carga automáticamente la ilustración o miniatura relacionada con el video. Para agregar imágenes relacionadas con la página, carga una imagen en el panel Medios.

Utiliza estos diseños para mostrar una ubicación física, como una ubicación de tienda, estudio o evento:

  • Flagship
  • Harbor

Para agregar un mapa, haz clic en Ubicación del mapa en el menú Página de Portada. Introduce una dirección para el pin y, a continuación, haz clic en +/- en el panel para cambiar el zoom predeterminado.

Al hacer clic en el pin, se abre la ubicación en Google Maps. No es posible agregar varios pines al mapa.

Utiliza estos diseños para mostrar una diapositiva de los últimos tweets de una fuente de Twitter o filtro de búsqueda:

  • Echo
  • Estado 

Para conectar una fuente de Twitter, haz clic en Twitter en el menú Página de Portada y, a continuación, haz clic en Agregar cuenta. Puedes mostrar los tweets de tu cuenta o un feed de los tweets de otras personas mediante un hashtag, menciones o cualquier término con Usar búsqueda de Twitter.

Sugerencia avanzada: para consultar las líneas guía de Twitter sobre el uso de operadores de consulta en su búsqueda, visita la documentación de la API de Twitter.

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 el logotipo de Squarespace.
  • 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:

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 un vínculo a 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, vínculos de navegación y una opción de formulario o registro para boletín. 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 el boletín.

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 vínculos 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 “the  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 boletín

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

  1. Elige Formulario o Boletín 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 el boletín para crear el contenido.
  4. Para los formularios, puedes añadir el nombre de tu formulario a la casilla Nombre del formulario. No es posible asignar un nombre a los registros para el boletín.
  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 el boletín solo tienen un campo para la Dirección de correo electrónico.
  6. Click the Storage tab to tell us where to send submissions. If you use an Email Campaigns mailing list as your storage option, subscribers will receive a confirmation email when they sign up. It's not possible to disable this.
  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 el boletín 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 retoque Color de superposición personalizado en el panel Estilo para agregar un color al fondo del formulario o registro para el boletín. Si deseas ocultar esta superposición del resto de tu página, usa el control deslizante de opacidad para hacerlo transparente. Los que visitan el sitio verán la superposición después de hacer clic en el botón del formulario o de registro para el boletín.

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 el boletín 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 boletín 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 el boletín, 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 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

Usa el panel de Estilo en el menú de tu 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 retoque 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 un dispositivo móvil. Puedes obtener una vista previa de cómo aparecerá tu página en dispositivos móviles mediante Vista de 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: coloca 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.
  • Medios (no disponible en diseños de ubicación): define el estilo como completo o cuadrícula y personaliza el aspecto de cuadrícula. Selecciona Color de superposición automático y Color de carga automático o bien, desmarca y define colores para cada uno. Ve más información sobre cómo cargar un 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.
  • Twitter (solo diseños de Twitter): establece la fuente, el estilo y el color del texto de los tweets (cuerpo) y el identificador de Twitter (nombre ymeta).

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 de 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 retoques 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 texto del cuerpo 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 secuencias, 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, consulta nuestras Preguntas frecuentes sobre el código personalizado.

¿Por qué no se actualiza mi fuente de Twitter?

La integración de la fuente de Twitter se actualiza cada cinco minutos. Si transcurre más tiempo, actualiza la conexión manualmente:

  1. En el menú Página de Portada, haz clic en Íconos de redes sociales y, a continuación, en Cuentas conectadas.
  2. Haz clic en tu cuenta de Twitter.
  3. Haz clic en Restablecer datos. Aparecerá un mensaje en el que se indica que los datos se están restableciendo y que la fuente se actualizará en unos minutos.
  4. Haz clic en Guardar.

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.
¿Fue útil este artículo?
Usuarios a los que les pareció útil: 381 de 591