Episode Details

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.

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 dis