Crear una página web responsive automáticamente

Hoy es imprescindible crear una página web responsiva, es decir una página web que se adapta a las pantallas de los smartphones. Como siempre, deseamos ofrecerte una libertad y una facilidad máximas a la vez.

Como puedes comprobar en el tutorial 👉 Optimiza la página web para los móviles, es posible construir manualmente una vista móvil totalmente personalizada. ¡En esta guía, descubre cómo la optimización automática permite obtener rápidamente una página web responsiva!

Activación de la versión automática de la vista móvil: 3-2-1, ¡aquí vamos! 🛩

Activación de la versión automática de la vista móvil

Pasar a la versión automática de la vista móvil

Para administrar la versión móvil de la página web, debes seleccionar dicha vista en la barra de herramientas del editor:

1. Elección de la optimización automática

2. Panel de información sobre la utilización de la vista móvil

3. Vista móvil de la página actual

4. Panel de administración de la visibilidad de los módulos

Eligiendo la optimización automática, toda la página web se ve afectada por este modo que surte efecto de manera instantánea.

Personalizar la versión automática de la vista móvil

Una vez que actives la versión automática de la vista móvil, un potente algoritmo analiza las páginas de tu página web y genera la versión móvil de la página web sin acción por tu parte. El tamaño y la posición de todos los módulos se ajustan para obtener páginas móviles optimizadas. ¡En general, el resultado es perfecto sin acción por tu parte!

Sin embargo, puedes actuar sobre cada página de manera individual para personalizar la vista generada automáticamente. Aquí tienes dos sencillos pasos para personalizar una página de la versión móvil de la página web:

👉 Cambiar la posición de los módulos

👉 Cambiar la visibilidad de los módulos

Veamos esto en detalle…

Cambiar la posición de los módulos

Enlaces verticales y horizontales

Como puedes ver en el siguiente video, puedes mover los módulos en la vista móvil para que se posicionen de manera diferente respecto a otros módulos.

Puedes mover un módulo por encima, por debajo, a la izquierda o a la derecha. Además, tenemos dos gratas noticias adicionales (¡hurra! ✌).

👉 Estos desplazamientos son independientes respecto a la vista como en el ordenador: tus páginas no cambian en el ordenador.

👉 Estos desplazamientos se guardan. Por lo tanto, si cambias la posición de estos módulos en la vista como en el ordenador, conservarás su posición en la versión automática de la vista móvil.

Estos desplazamientos crean un enlace manual entre los módulos, lo que permite guardar estos desplazamientos.

💡 Para eliminar un enlace manual y volver a la posición por defecto de la versión automática de la vista móvil, sólo tienes que hacer clic en el marcador de este enlace.

Enlaces internos

En algunos casos especiales, es posible que desees poner un módulo dentro de otro módulo. Tranquilízate: ¡es posible! 🚀

Para que un módulo contenga otro módulo en forma de enlace interno, debes seleccionar el modo Contenedor.

En este ejemplo, el modo Contenedor está activado para el módulo de Imagen. Por lo tanto, es posible crear enlaces internos como en el siguiente video:

Cambiar la visibilidad de los módulos

Tienes la posibilidad de eliminar de la vista móvil algunos módulos que se encuentran en la vista como en el ordenador. Esto consiste en administrar la visibilidad de los módulos. Es muy fácil (te lo prometemos): ¡el módulo es visible o invisible!

1. En la vista móvil, sólo tienes que hacer clic en el icono en forma de ojo tachado para que el módulo sea invisible. El módulo desaparece de la vista móvil y aparece en el listado de los módulos invisibles.

2. En el listado de los módulos invisibles, un clic en el icono en forma de ojo permite al módulo ser visible de nuevo en la vista móvil.

Aquí tienes el resultado:

Versión móvil automática de la página web: en conclusión

¡La versión automática de la vista móvil es la mejor manera para obtener una página web responsiva sin acción por tu parte! Como se descubrió en esta guía, algunas acciones muy sencillas permiten personalizar esta vista móvil para obtener páginas absolutamente perfectas en los smartphones.