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

WordPress Semanal

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:

1. Nuevo vídeo de la Zona código: cómo personalizar enlaces por css en WordPress
2. Curso del mes: Curso de WooCommerce (renovado)
3. 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.