1.5Responsive: móvil y tableta
Lo esencial en 30 segundos
- Responsive = la página se adapta al tamaño de la pantalla (ordenador, tableta, móvil).
- Elementor tiene una vista previa por dispositivo: se ajusta por punto de ruptura (desktop / tableta / móvil) sin romper los demás.
- Se puede ocultar/mostrar un elemento según el dispositivo y ajustar tamaños, espaciados, orden.
Hilo conductor — Nadia prueba en el teléfono
En el ordenador, la página de inicio del carpintero es perfecta. En el teléfono de Nadia, la banda se desborda y los 3 trabajos se amontonan. Descubre la vista previa móvil: reduce los títulos, apila las tarjetas y oculta un elemento decorativo inútil en pantalla pequeña. El sitio se vuelve legible en todas partes.
Última etapa del nivel 1 — un sitio que no funciona en móvil no funciona.
1. Vista previa y puntos de ruptura
Elementor ofrece una vista previa responsive: una barra para alternar entre ordenador, tableta y móvil. Los ajustes hechos en un modo se aplican a ese punto de ruptura (y a los más pequeños) sin romper los demás: se puede reducir un tamaño de título solo en el móvil.
Nadia alterna al modo móvil y ajusta: la banda pasa a columna (gracias al wrap visto en 1.1), los títulos encogen, los paddings se aprietan. La vista previa le muestra el resultado real.
2. Ocultar, reordenar, probar
En la pestaña Avanzado → Responsive, se puede ocultar/mostrar un elemento según el dispositivo (p. ej. ocultar una imagen decorativa grande en el móvil) y a veces cambiar el orden de los elementos. También se ajustan tamaños y espaciados por dispositivo.
Regla de oro: probar de verdad en un teléfono, no solo en la vista previa. Un sitio no responsive pierde a la mayoría de los visitantes, que a menudo llegan desde el móvil.
🔎 Ejemplo concreto — Hacer legible la página de inicio en móvil (caso Nadia)
Modo móvil (vista previa):
- banda: pasa a columna (wrap), botón a todo el ancho
- títulos: tamaño reducido
- 3 trabajos: apilados (una columna)
- imagen decorativa: oculta en el móvil
→ Luego probar en un teléfono real.Resultado: un sitio legible en todas las pantallas.
Lección: ajustar por dispositivo + probar de verdad.
Vocabulario de la sección
- Responsive
- La capacidad de una página de adaptarse al tamaño de la pantalla.
Ejemplo sencillo: la banda pasa a columna en el móvil.
Lo que no es: una página fija que se desborda en pantalla pequeña.
Reflejo: pensar en móvil desde el diseño.
- Punto de ruptura (breakpoint)
- El umbral de pantalla (desktop, tableta, móvil) en el que se aplican ajustes específicos.
Ejemplo sencillo: reducir el tamaño de los títulos solo en el móvil.
Lo que no es: creer que un ajuste móvil cambia también el desktop.
Reflejo: ajustar en el modo = ajustar ese punto de ruptura (y los más pequeños).
- Vista previa por dispositivo
- La alternancia ordenador/tableta/móvil para ver y ajustar el resultado por pantalla.
Ejemplo sencillo: Nadia alterna al móvil para ajustar la banda.
Lo que no es: juzgar solo en la pantalla del ordenador.
Reflejo: comprobar siempre las 3 vistas previas.
- Ocultar / reordenar
- Mostrar u ocultar un elemento según el dispositivo, y a veces cambiar su orden.
Ejemplo sencillo: ocultar una imagen decorativa grande en el móvil.
Lo que no es: mantener en el móvil elementos pesados e inútiles.
Reflejo: en el móvil, quedarse con lo esencial.
- Prueba real
- Comprobar el resultado en un teléfono real, no solo en la vista previa.
Ejemplo sencillo: Nadia abre el sitio en su teléfono antes de entregar.
Lo que no es: entregar sin probar nunca en móvil.
Reflejo: antes de entregar, abrir en un móvil real.
En la práctica — Adaptar una página al móvil
- Alterna la vista previa al modo móvil.
- Reduce el tamaño de los títulos y aprieta los paddings para el móvil.
- Comprueba que los bloques se apilan (wrap) y oculta lo inútil en pantalla pequeña.
- Prueba la página en un teléfono real antes de validar.
Guion listo para decir — tranquilizar al cliente sobre el móvil (20 s)
"La mayoría de sus clientes le encontrarán desde su teléfono. Por eso he adaptado el sitio para móvil: textos legibles, botón de llamada bien visible, imágenes aligeradas. Lo he probado en un teléfono real, no solo en el ordenador, para asegurarme de que todo está nítido."
Destacar el móvil como prioridad comercial.
Plantilla para copiar y pegar — comprobación responsive
VISTA PREVIA MÓVIL: ¿títulos reducidos? ¿paddings apretados?
BLOQUES: ¿se apilan correctamente (wrap)?
ELEMENTOS OCULTADOS EN MÓVIL (inútiles): _______________
BOTONES: ¿bastante grandes, legibles con el pulgar?
PRUEBA EN UN TELÉFONO REAL: hecha / por hacer
TABLETA COMPROBADA: sí / noMobile-first
Diseñar primero para móvil, luego ampliar: evita las malas sorpresas.
Botón de llamada
En el móvil, botón "tel:" bien visible: contacto con un toque.
Imágenes
Aligerar y, eventualmente, ocultar las imágenes decorativas en el móvil (rendimiento).
Tableta
No olvidar la tableta: a menudo entre ambas, también hay que comprobarla.
✓ Buenas prácticas
- Ajustar por punto de ruptura (móvil sin romper el desktop).
- Ocultar lo inútil en pantalla pequeña.
- Probar en un teléfono real antes de entregar.
✗ Errores frecuentes
- Juzgar solo en la pantalla del ordenador.
- Dejar que la banda se desborde en el móvil.
- Mantener imágenes pesadas/inútiles en el móvil.
Puntos clave
- Responsive = la página se adapta a la pantalla.
- Ajustar por punto de ruptura (desktop/tableta/móvil).
- Ocultar/reordenar según el dispositivo.
- Probar de verdad en un teléfono.
Reto 48h — aplica mañana
Toma una página, pasa a vista previa móvil, reduce los títulos, comprueba que los bloques se apilan, oculta un elemento inútil, y luego abre la página en tu teléfono. Anota un fallo corregido. 20 minutos.
- Ajusto la visualización por punto de ruptura.
- Oculto lo inútil en el móvil.
- Pruebo en un teléfono real antes de entregar.
Preguntas frecuentes
¿Un ajuste móvil cambia también el ordenador?
No: un ajuste hecho en modo móvil se aplica al móvil (y a las pantallas más pequeñas) sin modificar el desktop. Ese es todo el interés de los puntos de ruptura.
¿Puedo ocultar un elemento en el móvil?
Sí: en Avanzado → Responsive, se puede ocultar/mostrar un elemento según el dispositivo. Práctico para aligerar el móvil (imágenes decorativas, bloques secundarios).
¿Basta la vista previa para validar el móvil?
Ayuda, pero siempre hay que probar en un teléfono real: tamaños de fuente, botones clicables con el pulgar, velocidad de carga real.
La página de inicio es perfecta en ordenador pero la banda se desborda en el móvil. ¿Cuál es el reflejo correcto?