#6 Diseño responsive (móvil y tablet)- Curso Woocommerce con Elementor

Aprende a diseñar páginas responsive en Elementor adaptadas a móvil y tablet. Descubre cómo ajustar tamaños, espaciados y elementos para ofrecer una experiencia óptima en cualquier dispositivo, mejorando la usabilidad y el rendimiento de tu web.

Contenido de la lección

(Recordar que este contenido es la escaleta)

1. Introducción: objetivo de la lección, aprender a adaptar diseños a tablet y móvil en Elementor
2. Puntos de rotura (breakpoints): dónde configurarlos y qué significan
   • Tablet: menos de 1024px
   • Móvil: menos de 767px
3. Demostración práctica: contenedor con título e imagen en horizontal
4. Cambiar dirección de los hijos del contenedor en tablet: de horizontal a vertical
5. Cambiar el orden de los elementos en móvil (imagen arriba, título abajo)
6. Imágenes de fondo responsive: cómo asignar una imagen diferente para ordenador, tablet y móvil
7. Qué se puede y qué no se puede adaptar por dispositivo en Elementor:
   • El icono de responsive como guía visual para saber qué propiedades son adaptables
   • Ejemplo: el texto no cambia, pero el alineado sí
   • Herencia entre dispositivos: móvil hereda de tablet si no se define valor propio
8. Buenas prácticas: diseñar primero en ordenador y luego ajustar tablet y móvil
9. Cierre: recordatorio de que el tráfico móvil es mayoritario

Objetivo de la lección

Que el alumno sepa adaptar correctamente cualquier diseño de Elementor a versión tablet y móvil, entienda los puntos de rotura, identifique qué propiedades son adaptables por dispositivo y aplique buenas prácticas en el flujo de trabajo responsive.

Recursos

• Configuración de breakpoints en Elementor: https://elementor.com/help/breakpoints/
• Estadísticas de tráfico móvil global (referencia): https://gs.statcounter.com/platform-market-share/desktop-mobile-tablet