Haz que tu sitio se vea bien en móviles y tabletas
Comprueba cómo se ve tu tienda en tabletas y móviles, oculta bloques en pantallas pequeñas y ajusta la posición de un bloque solo para un tamaño de pantalla.
La mayoría de los clientes visita una tienda desde el móvil, así que tus páginas tienen que funcionar en todos los tamaños. Diseñas una sola vez y Payly adapta la página para tabletas y móviles. Este artículo explica qué ocurre por sí solo y cómo cambiarlo cuando quieres que un bloque se comporte de otra manera en una pantalla más pequeña.
Cómo se adapta tu diseño
Los bloques se colocan en celdas de una cuadrícula de 12 columnas, nunca en posiciones fijas en píxeles, así que no pueden superponerse en una pantalla pequeña. La página cambia de disposición en dos puntos:
- Tabletas (pantallas de menos de 1024 píxeles de ancho) mantienen la misma cuadrícula. Un bloque se queda donde está, a menos que lo muevas para tabletas.
- Móviles (760 píxeles de ancho o menos) colocan cada bloque en su propia fila, a todo el ancho. Los bloques se apilan de arriba abajo en el orden en que se leen en el escritorio: de arriba abajo y, después, de izquierda a derecha.
Algunos bloques se adaptan aún más. Los enlaces del encabezado se pliegan tras un botón de menú, las cuadrículas pasan a una sola columna, y las galerías y las tiras de logotipos muestran dos columnas. El resultado es una tienda que funciona en un móvil sin ninguna configuración adicional.
Cambia entre tamaños de pantalla
- En la barra superior del editor, haz clic en Tableta o Móvil. La página se estrecha para mostrar cómo se ve en ese tamaño.
- Recorre la página en busca de cualquier cosa que no se lea bien. Desplázate y selecciona bloques como haces normalmente.
- Haz clic en Escritorio para volver a la disposición a tamaño completo.
Estos botones hacen algo más que una vista previa. También eligen qué disposición estás editando. Al cambiar a Tableta o Móvil, un mensaje te recuerda que los cambios se aplican solo a ese tamaño. Cualquier cambio que hagas ahí no afecta a la disposición de escritorio.
Oculta un bloque en pantallas pequeñas
Una foto grande o un bloque decorativo largo puede saturar un móvil. Puedes ocultarlo en pantallas pequeñas y mantenerlo en el escritorio.
- Haz clic en Móvil (o en Tableta) en la barra superior.
- Selecciona el bloque.
- En el panel de ajustes, abre Tamaño y posición.
- Activa Ocultar en móvil (o Ocultar en tableta). El bloque desaparece de esa vista y no deja ningún hueco vacío en el sitio publicado.
Un bloque oculto en tabletas también queda oculto en móviles, a menos que vuelvas a desactivar el interruptor mientras ves Móvil. Para ocultar un bloque en todas las pantallas, usa Ocultar este bloque en Escritorio.
Coloca un bloque de forma distinta en un solo tamaño
- Elige Tableta o Móvil en la barra superior.
- Selecciona el bloque y abre Tamaño y posición.
- Cambia Empieza en la columna, Columnas de ancho, Empieza en la fila o Filas de alto, o haz clic en Ocupar todo el ancho. También puedes arrastrar el bloque y cambiar su tamaño directamente en la página.
La barra de la parte superior de Tamaño y posición indica qué disposición estás editando. Muestra Heredado mientras el bloque sigue el tamaño mayor, y un botón Restablecer cuando el bloque ya tiene ajustes propios. Haz clic en Restablecer para que el bloque vuelva a seguir el tamaño mayor. Haz clic en Usar esta disposición en todas las pantallas para copiar la disposición actual a todos los tamaños.
La barra superior también cuenta los bloques que difieren de la disposición de escritorio, por ejemplo 1 bloque es distinto en móvil. Haz clic en el recuento para saltar de uno de estos bloques al siguiente.
Mantén un bloque igual en todas las pantallas
Activa Igual en todas las pantallas en Tamaño y posición para dar a un bloque una única disposición en todas partes. Se eliminan los ajustes que tuviera para tableta o móvil, y las ediciones posteriores se aplican a todos los tamaños a la vez.
Nota: Mover un bloque a otra sección lo cambia en todos los tamaños de pantalla, así que Payly solo lo permite en Escritorio. Para colocar un bloque de forma distinta en móviles, añádelo a las dos secciones y oculta en cada tamaño el que no quieras.
Comprueba el resultado
Usa Vista previa para recorrer tus páginas con anchos de móvil y de tableta, y mira la tienda publicada en un móvil real antes de anunciarla. Consulta Previsualiza tu sitio antes de publicarlo.