Curso Wordpress 2021 | 17. Como Hacer un Diseño RESPONSIVE con GUTENBERG

En esta lección del curso de WordPress vemos qué es el diseño responsive y cómo revisar y corregir nuestra web para que se vea bien en tablet y móvil. Hoy la mayoría de las visitas llegan desde el móvil, así que es imprescindible.

Qué es responsive

Una web responsive se adapta al tamaño de la pantalla: en el ordenador, tres columnas en fila; en la tablet, dos; en el móvil, una debajo de otra, y el menú se convierte en un botón desplegable (la «hamburguesa»). Gutenberg y Astra ya lo hacen casi todo solos, pero hay que revisar los detalles.

Probar la web en otros tamaños

1. En la web, clic derecho → Inspeccionar.
2. Pulsa el icono del móvil y la tablet (Vista de diseño adaptable; en Chrome, Ctrl + Shift + M).
3. Estrecha la ventana arrastrando los bordes o elige un dispositivo de la lista, y recorre la página de arriba abajo buscando fallos: franjas blancas, textos pegados, huecos enormes…

Truco: abre el editor en otra pestaña (clic derecho en Editar página → abrir en pestaña nueva) y deja la vista adaptable en la otra.

Corregir por dispositivo

En los bloques de Spectra, junto a Espaciado (margin y padding) hay tres iconos: ordenador, tablet y móvil. El valor que pongas con uno seleccionado solo se aplica en ese dispositivo. Ejemplos:

• Una franja blanca solo en tablet: selecciona la sección, icono de tablet y pon un margin superior negativo (-30, -50 px…).
• Demasiado hueco en el móvil: icono de móvil y baja el padding.

Invertir columnas en el móvil

En las secciones alternas (texto-imagen, imagen-texto), en el móvil las columnas se apilan y el orden queda raro. Selecciona la sección invertida y activa Invertir columnas en tablet y móvil: así siempre sale título, texto e imagen.

Repásalo en cada página y, cuando esté publicada, compruébala también en tu móvil de verdad.

En la siguiente lección: enlaces de ancla para saltar a una sección. ¿Dudas? En los comentarios.