Adaptación de la versión móvil de una página web
Cómo configurar adicionalmente la visualización de la página en distintos dispositivos
Tilda Adapta automáticamente las páginas web a diferentes dispositivos: smartphones, tabletas, ordenadores portátiles y ordenadores de sobremesa. Si es necesario, puedes configurar de forma flexible la versión móvil de los bloques estándar o crear tu propia versión adaptativa de la página web utilizando Zero Block.

Lee esta guía detallada para aprender a configurar la versión móvil de una página web en Tilda.
Más
Más
Más
Más
Más
Más
Más
Modo de edición de la versión móvil
Una vez que hayas añadido y configurado los bloques estándar, también puedes editar su versión para móviles. Para ello, haz clic en el icono del dispositivo móvil situado en el centro del panel del editor de páginas.

En el menú desplegable, selecciona el tamaño de pantalla deseado. Si necesitas comprobar cómo se ve la página en un dispositivo concreto, selecciónalo o elige la opción más parecida en la sección «Dispositivos».
El editor pasará al modo móvil, lo que facilitará la edición de bloques.
Importante: Cambiar a la visualización por bloques en el editor no supone una vista previa completa de la página web diseñada. En este modo, las animaciones no funcionan y es posible que algunos bloques se muestren de forma diferente a como aparecerán en la página publicada. Para ver cómo quedará la página web tras su publicación, haz clic en «Vista previa».
Modo de vista previa
En el modo de vista previa, haz clic en el icono del dispositivo móvil y selecciona el tamaño de pantalla que desees.
Importante: No se pueden editar los ajustes del bloque en el modo de vista previa. Este modo sirve únicamente para comprobar cómo se muestra la página.
Para ocultar la interfaz del editor, haz clic en el icono de las flechas situado en la esquina inferior izquierda o junto a «Volver a la edición».
Para cambiar la escala de la vista previa, haz clic en el icono del 100 % y selecciona el valor que necesites en el menú desplegable.
Haz clic en el icono del lápiz para volver al editor y realizar cambios en los bloques.
Edición de la configuración de los bloques para la versión móvil
Cada bloque cuenta con ajustes independientes de relleno y tipografía para la versión móvil. Dependiendo del bloque, también pueden estar disponibles ajustes adicionales para elementos concretos en dispositivos móviles. Estos ajustes suelen estar señalados con indicaciones en el panel de configuración.

Por ejemplo, un bloque de menú puede tener una pestaña de configuración específica para ello.
En los bloques de portada, la configuración de la versión para móviles puede aparecer indicada con un icono de teléfono.
Para abrir la configuración específica de un dispositivo móvil, haz clic en el icono de escritorio situado junto al campo correspondiente. Aparecerá un campo adicional con un icono de smartphone.
Cómo cambiar el tamaño de la fuente y el interlineado para dispositivos móviles. En la configuración del bloque, abre la sección «Tipografía», haz clic en el icono de ordenador de sobremesa e introduce el tamaño de fuente para la versión móvil en el campo con el icono de dispositivo móvil.

El interlineado se configura de la misma manera.
Modificación del radio de las esquinas y el relleno de las imágenes de portada en dispositivos móviles. Puedes establecer un valor de radio de esquinas o de relleno independiente para dispositivos móviles en los bloques de las categorías «Portada» e «Imagen».

Para modificar el radio o el relleno, haz clic en «Configuración» y busca el campo correspondiente. A continuación, haz clic en el icono de escritorio situado junto al campo e introduce el valor para la versión móvil.
Cambiar la posición de la imagen de fondo. En los bloques de portada y otros bloques en los que esté disponible esta opción, puedes seleccionar la parte de la imagen que se mostrará en el bloque.

Para establecer la posición automática, selecciona el valor adecuado en el menú desplegable; por ejemplo, «Centrado».
Para establecer la posición manualmente, haz clic en el icono situado junto al campo.
Se abrirá la imagen con los puntos de posicionamiento. Puedes seleccionar uno de los puntos ya disponibles o colocar tu propio punto donde lo necesites.
El posicionamiento permite ajustar la forma en que se muestra la imagen de fondo en la versión móvil, de modo que la misma imagen se vea bien en diferentes pantallas.
Configuración del relleno para dispositivos móviles
En cualquier bloque, abre los ajustes, haz clic en el icono situado junto a los campos «Márgen superior» o «Márgen inferior» e introduce el valor correspondiente al dispositivo móvil.
Rango de visibilidad en distintos dispositivos
Si necesitas que se muestren bloques diferentes en los teléfonos inteligentes y en los ordenadores de sobremesa, configura el rango de visibilidad.

Abre la configuración del bloque y desplázate hacia abajo hasta la opción «Visibilidad del bloque en dispositivos». Especifica en qué dispositivos debe mostrarse el bloque. A continuación, guarda la configuración y vuelve a publicar la página.
Configuración del diseño adaptativo en Zero Block
Puedes configurar la adaptabilidad de los bloques a diferentes dispositivos convirtiendo el bloque en « Zero Block » mediante la opción disponible en la configuración del bloque. Esta opción está disponible actualmente en la mayoría de los bloques.
Una vez que hayas convertido un bloque en « Zero Block », el contenido y el diseño volverán a los ajustes predeterminados. Tendrás que volver a añadir el texto y las imágenes al bloque.
Tras la conversión, podrás configurar manualmente el aspecto del bloque en cinco rangos de ancho de pantalla o añadir tus propios rangos. Para obtener más información sobre cómo configurar el diseño adaptativo en « Zero Block », consulta los artículos «Zero Block: Cómo crear un bloque personalizado » y «Zero Block: Diseño adaptativo ».
Desactivar la adaptabilidad de la página
Si desactivas el diseño adaptativo, la página para dispositivos móviles tendrá el mismo aspecto que la de ordenador.

Para desactivar la versión adaptativa, ve a «Configuración de la página» → «Adicional», marca la casilla «Desactivar vista móvil» y vuelve a publicar la página.
Hecho en
Tilda