Crear una página web responsive automáticamente

22 noviembre, 2022 - Claire Tourtoulou
15793 vistas

3 minutos

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

Versión móvil en SiteW

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.

enlace manual del módulo

💡 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.

módulo 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

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:

Módulos invisibles en SiteW

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.

Claire Tourtoulou
Responsable de Redes Sociales
Como apasionada de la Web y autodidacta, me encanta aprender cosas nuevas y compartir mis conocimientos con los demás. En paralelo, administro un blog sobre mi segunda pasión: los videojuegos. Aparte de eso, dedico gran parte de mi tiempo al deporte y a las mascotas. 🐶

Última actualización: 22 noviembre, 2022