188 | Consejos para diseñar una web responsive con Elementor

En el episodio 188 de WordPress Semanal te doy 5 consejos fáciles de implementar para perfeccionar las versiones para dispositivos móviles de tus diseños con Elementor.
Escuchar en iTunes Escuchar en iVoox Escuchar en Spotify Plugin de la semana: lazy loading nativo (si está disponible) Con el plugin Flying images te asegurarás de que tus imágenes se carguen únicamente cuando aparezcan en la pantalla de tu visitante.
Esto puedes hacerlo con cualquiera de los muchos plugins que hay para ello. Pero las tecnologías avanzan y ahora, navegadores como chrome, ya hacen el lazy loading sin que tengas que añadir nada extra.
Pero, ¿qué pasa si el navegador no lo hace? Ahí entra en juego el plugin de esta semana. Detectará si hay lazy loading nativo y, de no haberlo, lo pondrá en marcha.
5 consejos para diseñar de forma responsive con Elementor Page Builder Antes que nada, debes saber que Elementor, como otros constructores visuales, te permite personalizar las versiones para dispositivos móviles de tu web sin que afecte a la versión para pantallas grandes.
Siempre que veas  podrás abrir sus opciones de edición para tablet y móvil y verás las siguientes opciones .
Además, como con el personalizador nativo de WordPress, podrás previsualizar la página que estés editando en versión móvil o tablet. En ese modo, todo lo que edites (siempre que tenga los iconos de arriba) se aplicará para ese tamaño de pantalla.
1) Tamaño de fuente para móviles Un título grande puede quedar fatal en dispositivos móviles
Un texto óptimo para leer en pantallas grandes puede ser terrible en pequeños dispositivos
Esto se hace Estilo > Tipografía
Incluso puede ser interesante cambiar la alineación
En Contenido > Alineación
2) Invertir columnas Cuántas veces has hecho un diseño en 2 columnas con imagen – texto; texto – imagen.
Es un diseño muy típico y, gracias a Elementor, será automáticamente responsive
El problema es cuando en dispositivos móviles aparece texto – imagen – imagen – texto
Eso altera el propósito del diseño y además queda extraño
Tienes la opción de invertir columnas para dispositivos móviles
Selecciona la sección y ve a Avanzado > Responsive > Columnas invertidas
3) Ancho de columna responsive Cuando trabajas con columnas, es genial que el responsive se haga automático
Pero, qué pasa si en móvil, en lugar de todo en una columna, quieres dos o tres
Puedes
Selecciona las columnas y ve a Layout > Ancho de columna para ponerles el porcentaje de ancho que quieras (50% para dos)
4) Padding y Margin Es muy típico encontrarte con demasiado espacio cuando pasas a versión móvil
Personaliza los márgenes para dispositivos móviles (pruebas poniéndolos a cero)
También es común que los textos queden demasiado apretados, seguramente tengan demasiado padding
Margin: espacio de los elementos con respecto a otros
Padding: espacio alrededor del elemento con respecto a sí mismo
Puedes personalizar el margin y el padding en Avanzado > Estilos
5) Oculta y muestra elementos ¿Sabías que puedes crear elementos sólo visibles en móvil y otros sólo en pantallas grandes?
Esto puede dar mucho juego y optimizar al máximo la experiencia de tus usuarios
Por ejemplo, imagina que tienes un botón para descargar una app o uno para contactar por WhatsApp (vídeo zona código)
Puedes hacer que se muestren únicamente en dispositivos móviles
Y eso sería con un elemento concreto, pero también puedes ocultar secciones enteras
Tienes la opción en Avanzado > Responsive
Accede a +40 cursos, +130 vídeos avanzados y soporte conmigo: prueba el área para suscriptores durante 15 días sin compromiso.
Enlaces En este episodio he mencionado los siguientes recursos:
Nuevo vídeo de la Zona código: cómo personalizar enlaces por css en WordPress
Curso del mes: Curso de WooCommerce (renovado)
Recomendación: Clase del curso de Elementor sobre el responsive y vídeo sobre margin y padding de la zona código
Conclusión Hemos repasado 5 sencillas opciones de Elementor para trabajar la parte responsive de tu web.
Una buena práctica es repasar las versiones para móvil y tablet cuando termines de diseñar una página. Puedes hacer fácil y rápidamente desde el mismo editor de Elementor. Así corregirás lo necesario al momento.

Si te ha gustado el episodio de hoy y quieres ayudarme a seguir creando episodios como este en iTunes, deja una valoración aquí (tardarás segundos). ¡¡Gracias!!
Si me escuchas desde iVoox, también te agradezco tus comentarios y me gusta.
La entrada 188 | Consejos para diseñar una web responsive con Elementor es una artículo de Gonzalo Navarro.