Cómo optimizar un sitio web para su visualización en dispositivos móviles
Configurar la vista de la página en varios dispositivos
Tilda ajusta automáticamente el sitio web para su visualización en tabletas, teléfonos inteligentes, netbooks, portátiles y ordenadores.
Además, puede cambiar el tamaño de los rellenos entre bloques para dispositivos móviles, ajustar la visibilidad de los bloques en distintos dispositivos, crear su propia versión adaptable con el editor Zero Block o desactivar la adaptabilidad del sitio web.
Cómo crear versiones de bloque diferentes para ordenador y dispositivos móviles
Cómo cambiar los valores de los paddings para dispositivos móviles
Cómo cambiar el tamaño de la fuente, el interlineado, así como el radio del borde de las imágenes y los rellenos exteriores de las portadas para dispositivos móviles.
Cómo editar la versión móvil y ver los cambios de una vez
Cómo crear su propia versión del sitio web para dispositivos móviles con el editor Zero Block
Cómo desactivar la adaptabilidad del sitio web a diferentes pantallas
Bloquear la visibilidad de los dispositivos
Este ajuste determina qué bloques pueden o no mostrarse en determinados tipos de dispositivos. Puede ajustar esta función en la configuración de cualquier bloque.
Por qué puede necesitarlo y cómo funciona
Si un bloque se ve bien en escritorio pero no tanto en móvil, puede que quiera establecer la visibilidad del bloque en 980px o más. De este modo, el bloque quedará orientado al escritorio y no aparecerá en los dispositivos móviles.
A continuación, debes copiar este bloque y optimizarlo para su visualización en móviles ajustando su configuración (por ejemplo, cambiando la imagen, el tamaño de la fuente, etc.). Ajusta la visibilidad del bloque a "0-980px". Obtendrás una versión móvil del bloque.
Así, quienes accedan a tu sitio web desde un PC verán la versión de escritorio y los usuarios de móviles, la versión móvil.
La visibilidad del bloque (diferentes valores de los parámetros) es útil para que puedas ajustar el aspecto del bloque para un dispositivo específico seleccionando la resolución, si lo necesitas. Por ejemplo, si algunos bloques no se ven bien en tabletas o en determinados teléfonos móviles.
Si un bloque se ve bien en escritorio pero no tanto en móvil, puede que quiera establecer la visibilidad del bloque en 980px o más. De este modo, el bloque quedará orientado al escritorio y no aparecerá en los dispositivos móviles.
A continuación, debes copiar este bloque y optimizarlo para su visualización en móviles ajustando su configuración (por ejemplo, cambiando la imagen, el tamaño de la fuente, etc.). Ajusta la visibilidad del bloque a "0-980px". Obtendrás una versión móvil del bloque.
Así, quienes accedan a tu sitio web desde un PC verán la versión de escritorio y los usuarios de móviles, la versión móvil.
La visibilidad del bloque (diferentes valores de los parámetros) es útil para que puedas ajustar el aspecto del bloque para un dispositivo específico seleccionando la resolución, si lo necesitas. Por ejemplo, si algunos bloques no se ven bien en tabletas o en determinados teléfonos móviles.
No es necesario cambiar el ajuste de visibilidad del bloque para todos los bloques. Puede ajustarlo para aquellos bloques en los que una foto no esté bien recortada, o si el bloque seleccionado no es adecuado para la versión móvil.
Ejemplo
Tenemos una portada que se ve muy bien en el escritorio, el texto alineado a la izquierda y el objeto principal a la derecha. Ahora vamos a ajustarla para que también se vea bien en dispositivos móviles.
Como vemos, la foto queda recortada en un móvil y no se ve muy bien.
Ajuste la visibilidad del bloque a "> 980px". Ahora, los usuarios de móviles ya no lo verán.
Copia el bloque.
Ajuste el bloque para la versión móvil: cambie la alineación de la foto y el texto.
Establezcamos la visibilidad de este bloque en "≤ 980px", no aparecerá en dispositivos con pantallas más anchas de 980px.
Listo. Ahora la portada se muestra de forma diferente en los distintos dispositivos en función de la anchura de la pantalla.
Ejemplos de anchura de pantalla para distintos dispositivos:
iPhone5: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
iPhone6: 375px
iPhone6+: 414px
iPad: 1024px
Samsung Galaxy: 360px
Nokia Lumia: 320px
Ajustar los rellenos para dispositivos móviles
En cualquier bloque, abre los ajustes, haz clic en el icono junto a la opción "Relleno superior" y "Relleno inferior" y ajusta el espaciado para el dispositivo móvil.
Ajustes adicionales para dispositivos móviles
En cualquier bloque, también puede cambiar el tamaño de la fuente y el interlineado para dispositivos móviles, y puede establecer esquinas redondeadas para las imágenes por separado.
Cambiar el tamaño de letra y el interlineado para dispositivos móviles
Para ello, haga clic en el botón "Configuración" del bloque y busque la pestaña "Tipografía". En esta pestaña, haga clic en el icono del ordenador situado junto al campo. Entonces aparecerá un campo en el que podrá especificar el tamaño de la fuente para la versión móvil.
El mismo orden de acciones se aplica para cambiar el interlineado.
El mismo orden de acciones se aplica para cambiar el interlineado.
Cambiar el radio del borde de la imagen y el relleno de la portada para dispositivos móviles
En todos los bloques de las categorías "Portada" e "Imagen" puedes establecer tu propio valor del radio del borde o del relleno exterior de las portadas específicas para dispositivos móviles.
Para cambiar el radio o el relleno, haz clic en el botón "Configuración" y busca el campo correspondiente. Haga clic en el icono del ordenador situado junto al campo y escriba el nuevo valor en el nuevo campo.
Para cambiar el radio o el relleno, haz clic en el botón "Configuración" y busca el campo correspondiente. Haga clic en el icono del ordenador situado junto al campo y escriba el nuevo valor en el nuevo campo.
Visualización de la versión móvil de los bloques en el editor
Esta función sólo está disponible en modo de prueba. Para acceder a ella, seleccione la casilla de verificación "Opt-in to become a beta-tester and try new features before they are released" en su perfil.
Para editar la versión móvil de un bloque, cambie la visualización en el editor a la versión móvil. Para ello, haga clic en el icono del teléfono del menú de la parte superior y seleccione la orientación deseada del dispositivo o su tamaño.
Por defecto, hay 4 tamaños de pantalla disponibles: 360px y 480px para un smartphone, 640px y 960px para una tableta.
Para seleccionar otro tamaño de dispositivo móvil, haga clic en "Dispositivos" en la lista. En el submenú, seleccione el dispositivo que necesite. Todos los dispositivos móviles y tabletas actualizados ya se han añadido a la lista.
Una vez que hayas cambiado el modo de visualización del bloque en el editor, haz clic en el botón "Configuración" del bloque. Ahora puedes configurar la versión móvil y los cambios se mostrarán en la vista previa al instante.
Configuración de la adaptabilidad en Zero Block
Puede ajustar la adaptabilidad del bloque a varios dispositivos convirtiéndolo en Zero Block mediante una opción en los ajustes del bloque. De momento, esta opción está disponible en la mayoría de los bloques.
Una vez convertido el bloque, puedes ajustar manualmente su aspecto para cinco versiones de anchos de pantalla. Puedes obtener más información sobre cómo configurar la adaptabilidad en Zero Block en las secciones "Zero Block: Cómo crear un bloque personalizado" y "Zero Block: Diseño adaptable".
Desactivar la adaptabilidad de página
Si desactiva la adaptabilidad, la página se verá en los dispositivos móviles igual que en un ordenador. Para ello, marque la casilla Desactivar vista móvil en Configuración de página → Adicional y vuelva a publicar la página.
A la izquierda, la versión del sitio web adaptada a dispositivos móviles; a la derecha, el sitio web con la adaptabilidad desactivada.
