Saltar al contenido
Elooo CRMCentro de Ayuda Ir a la web

Embudos y sitios

Cómo revisar y ajustar la versión para móvil y tablet de una página

En el editor, usa el selector de dispositivo (ordenador, tablet, móvil) para ver y editar cada versión y escribe un ancho en píxeles en Ancho del dispositivo para probar otras pantallas. Lo que cambies en modo móvil (ej.: el tamaño de una imagen) solo se aplica al móvil.

Actualizado el

Antes de empezar

  • Ten la página creada en un embudo o sitio web y abierta en el editor.
  • Haz primero la versión de ordenador. Las versiones de tablet y móvil la heredan hasta que las personalices.
  • Ten un móvil a mano para comprobarlo al final: la vista previa ayuda, pero la prueba real es en el dispositivo.
Dónde encontrarlo

Sitios › Embudos o Sitios web › (abrir la página) › Editar › selector de dispositivo (Ordenador / Tablet / Móvil)

Paso a paso

Ver la página en cada dispositivo

  1. Abre Sitios, elige Embudos o Sitios web y haz clic en Editar en la página.
  2. En la barra del editor, haz clic en el selector de dispositivo y elige Ordenador, Tablet o Móvil. El modo elegido define qué versión estás viendo y editando.
  3. Para probar un tamaño concreto, escribe el ancho en píxeles en el campo Ancho del dispositivo, junto al selector. Cada modo acepta un rango: ordenador de 1025 a 3000 px, tablet de 768 a 1024 px, móvil de 320 a 767 px.
  4. Haz clic en Aplicar o pulsa Intro. El área de edición cambia a ese ancho; si queda más grande que la pantalla, usa la barra de desplazamiento horizontal.
  5. Revisa secciones, filas, columnas, textos y espaciados con ese ancho. Repite con otros anchos o en otro modo.
  6. Usa la opción de restablecer para volver al ancho por defecto del modo.

Ajustar el tamaño de una imagen solo en el móvil

  1. Cambia al modo Móvil.
  2. Haz clic en la imagen para abrir sus ajustes.
  3. En Alto y Ancho, escribe los valores y elige la unidad: px (fijo), % (relativo al espacio disponible) o rem/em (relativo al texto). Puedes mezclar unidades, por ejemplo alto en px y ancho en %.
  4. Guarda. Estos valores se aplican solo al móvil; la versión de ordenador mantiene los suyos.
  5. Haz clic en Vista previa y compruébalo en los dos modos.

Ajustar filas y columnas en la tablet

  1. Cambia al modo Tablet.
  2. Selecciona la fila y ajusta el Ancho.
  3. Para redistribuir columnas contiguas, arrastra el tirador que hay entre ellas.
  4. Vuelve al modo Ordenador para comprobar que allí no ha cambiado nada y guarda.

Consejos

  • El ancho que escribes en Ancho del dispositivo es solo para la vista previa: no crea un nuevo punto de ruptura, no se guarda y no cambia la página publicada. Al recargar el editor vuelve al valor por defecto.
  • En el móvil, las filas ocupan siempre todo el ancho y las columnas se apilan una encima de otra; el control de ancho de la fila queda oculto.
  • La tablet hereda los anchos del ordenador. Para volver a heredar después de personalizar, pon el ancho de la fila en la tablet igual al del ordenador.
  • Si no defines dimensiones para el móvil, la imagen usa las del ordenador, que suelen ser demasiado grandes para pantallas pequeñas.

Problemas comunes

  • El campo de ancho no acepta el valor → Está fuera del rango del modo elegido. Cambia de modo (ej.: a tablet) o escribe un valor dentro del rango.
  • Cambié el tamaño en el móvil y también cambió en el ordenador → Comprueba que el selector estaba en Móvil antes de editar. Los cambios se aplican al modo que esté seleccionado.
  • La imagen sigue enorme en el móvil → Aún no tiene dimensiones propias para móvil. En modo Móvil, define el ancho en % (ej.: 100%) para que se adapte a la pantalla.
  • Las columnas quedan demasiado estrechas en la tablet → En modo Tablet, arrastra el tirador entre las columnas o ajusta el ancho de la fila. Esto no altera la versión de ordenador.
  • En el móvil real se ve distinto que en la vista previa → Publica la página y abre la dirección en el móvil; si usas varios anchos en la misma página, revisa cada sección en modo Móvil.

¿Te ha resultado útil?