Estilos para dispositivos móviles de página de portada en la versión 7.0

Última actualización: 23 de agosto de 2024

Vista previa de cómo se verá tu página de portada versión 7.0 en dispositivos móviles.

Para garantizar que tu página de portada se vea muy bien en todos los dispositivos, su diseño adaptable apilará automáticamente el contenido en una sola columna. Esto significa que tu página de portada se verá naturalmente un poco distinta en dispositivos móviles y equipos. Si bien la apariencia exacta de la página de portada para dispositivos móviles depende del diseño y el contenido, estas son algunas reglas generales.

Cómo acceder a esta función

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.

Vista previa con vista en dispositivo

Utiliza vista en dispositivo para obtener una vista previa de cómo se ve tu página de portada en un dispositivo móvil, tableta o computadora. También recomendamos visitar el sitio en tu propio dispositivo. Para visitar el sitio desde un dispositivo móvil, escribe la URL en la barra de direcciones del navegador móvil. El sitio no tiene una dirección diferente para dispositivos móviles.

Mobile background images

Si utilizas imágenes de fondo en la portada, te recomendamos que utilices una imagen sin texto ni bordes que ofrezca cierta flexibilidad al recortar. Para obtener más ayuda con esto, revisa nuestras prácticas recomendadas sobre imágenes de fondo

Text on mobile

Si el cuerpo del texto de una página de portada tiene un tamaño de fuente muy grande, las palabras y frases más largas podrían cortarse en dispositivos móviles. Para obtener los mejores resultados, recomendamos mantener el cuerpo del texto breve, utilizar un tamaño de fuente más pequeño para el cuerpo del texto y agregar espacios entre las palabras.

Overall layout changes on mobile

Estos son algunos ajustes que notarás cuando la portada se visualiza en un dispositivo móvil:

  • Split layouts (like Flash and Spotlight) stack vertically with the image stacked above the text.
KB Guide Image
  • Layouts with split text (like Debut and Projector) stack the left-side text above the right-side.
KB Guide Image
  • El diseño de Harbor se divide horizontalmente con el mapa apilado encima del texto.
KB Guide Image
Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Estilos para dispositivos móviles de página de portada en la versión 7.0