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 de dispositivos móviles cuando diseñas con Elementor. Vamos allá. Hola, hola, Soy Gonzalo de GonzaloNavarro es y bienvenidos a WordPress Semanal, el podcast en el que aprendes WordPress de principio a fin, porque ya sabes que no hay mejor inversión que que la de crear y gestionar tu propia web con WordPress. Y si para esa gestión, para ese día a día, utilizas Elementor como constructor visual para ayudarte en la confección de los diseños de tus páginas, pues te voy a dar cinco consejos que se pasan fácilmente por alto, sobre todo si no le dedicas ese tiempo que se merece. Y para ello te recomiendo el episodio anterior donde hablé de errores a evitar cuando usas un Page Builder, ya sea Elementor o cualquier otro episodio. Constructor visual. Ahí básicamente comenté, bueno, di seis puntos clave, pero comenté así líneas generales, que no debes descuidar las buenas prácticas aunque uses un constructor visual, ¿De acuerdo? Incluso dije en la conclusión que pienso que debe ser más riguroso en la preparación y en la ejecución para no sobrecargar tus páginas ni hacerlas difíciles de mantener o incluso de replicar. Porque una de las gracias de tener un constructor visual es poder copiar una misma base y partir sobre esa base. ¿Pero bueno, es eso, fue el episodio anterior que le puedes echar un vistazo GonzaloNavarro es 187 y vas al episodio, como digo anterior, si quieres ir directamente al actual y a las notas del programa, que las vamos a comentar ahora, pues puedes ir a GonzaloNavarro es 188 y precisamente si vas a esa página, en los enlaces te vas a encontrar las novedades qué está pasando en Gonzalo Navarro es esta semana? Pues como cada semana tenemos un nuevo vídeo de la zona código en el que os enseño a personalizar y dar estilos a los enlaces de tu web. Te voy a enseñar las propiedades más comunes de CSS de los links y además te voy a enseñar a modificarlos fácilmente. En el vídeo hago un repaso, hacemos retoques sencillos, como por ejemplo cambiar el color de los enlaces, el tamaño, el tipo de letra. Puedes cambiar si se van a mostrar en mayúsculas o en minúsculas, pero también te enseño a quitar los estilos que ya vienen en los enlaces que puedas tener en tu web. ¿Que esto es muy típico? Pues no lo sé, que tus enlaces por el theme que tienes te vienen con un subrayado que no te gusta nada, Pues bueno, te enseño a quitar todo ese aspecto y ya a partir de ahí tú le das el estilo que quiera los enlaces de tu web. También veremos sus propiedades en lo referente a sus distintos estados, porque ya sabéis que los enlaces, por ejemplo, cuando pasas el botón por encima suele pasar algo, a lo mejor cambia de color, se le quita un poquito el color, es decir, ocurre algo que da la sensación o que da muestras de que eso es un enlace. Pues te enseño a editar ese estado. También el estado activo, es decir, mientras está pulsando y el estado de visitados, los tres estados que básicamente siempre se editan cuando estás personalizando los enlaces. Así que como digo, vídeo 139 de la zona código, si eres suscriptor tienes acceso a él y tendrás acceso al vídeo y al código que simplemente tendrás que copiar y pegar para conseguir el mismo resultado. Más novedades. Seguimos. Tenemos el curso de este mes, que es el curso de WooCommerce que renové hace unos días, así que si estás pensando en crear una tienda online desde cero, pues. Pues ahí tienes ese curso donde te guío paso a paso sobre cómo hacerlo y luego las recomendaciones. Te voy a recomendar la clase del curso de Elementor que dedico al responsive, es decir, muy relacionada con el tema que vamos a hablar hoy. Y también te recomiendo un vídeo de la zona código sobre el margin y el padding, que básicamente es control de los espacios con CSS y también te voy a hablar un poquito de ello a lo largo de este episodio. Así que son dos vídeos muy relacionados y que tienes en la parte de enlaces. Recuerda GonzaloNamarro es 188. Genial. Pasamos ahora con el plugin de la semana que es para hacer un Lazy loading nativo, si es que estuviese disponible. Bueno, ya sabéis que el Lazy Loading, y si no, pues os lo explico rápidamente, es hacer una carga conforme se van viendo los elementos en el viewport. El viewport no es más que lo que se ve, por ejemplo, si alguien entra a mi web desde su navegador, desde Google Chrome por ejemplo, pues va a ver que tengo un texto a la izquierda con un botón y a la derecha una imagen, bien, pues más abajo tengo más imágenes pues. Pues esas imágenes no se van a cargar hasta que el visitante haga scroll y baje un poquito en la página y conforme esas imágenes vayan apareciendo en la pantalla, que sería el viewport, se irán cargando, ¿De acuerdo? Eso es básicamente el Lazy Loading. Y ahora se está implementando un Lazy Loading nativo de los navegadores. Los navegadores van a hacer esto ahora mismo en el momento de grabar, esto lo hace Chrome y no sé si alguno más. Y entonces ha salido un plugin del mismo desarrollador que el plugin que os recomendé en el episodio anterior que se llama Flying Images y con él te aseguras de que tus imágenes se carguen únicamente cuando aparezcan en la pantalla de tu visitante, que es básicamente el Lazy Loading, pero esto podrías hacerlo con cualquier otro plugin de Lazy Loading. La característica de este es que tiene en cuenta que hay algunos navegadores como te decía como Chrome que ya hacen el Lazy Loading y entonces este plugin detecta que si ya lo hace el navegador el plugin no hace nada, pero si no lo hace te añade un pequeño script de JavaScript que es como básicamente se suele hacer el Lazy Loading y lo hace el plugin por ti, o sea que básicamente detecta si hay Lazy Loading nativo y si no lo hay pues lo pone en marcha y si lo hay pues no hace nada. Sí, es bastante interesante, os dejo el enlace, se llama Flying Images y como digo es del mismo desarrollador del plugin que te recomendé la semana pasada que se llamaba Flying Pages, si no recuerdo mal. Fantástico. Una vez vistas las novedades y el plugin de la semana nos vamos con el tema 5 consejos para diseñar de forma responsive con Elementor Page Builder Bien, perfecto, vamos a ponernos en situación. Antes que nada debes saber que Elementor al igual que otros constructores visuales se te permite personalizar las versiones para dispositivos móviles de tu web sin que afecte a la versión de las pantallas grandes, es decir, puedes mantener como se está mostrando un diseño, pues imagínate que estás diseñando una landing page para vender un infoproducto, pues este constructor al igual que otros te permite modificar solo las versiones para tablets o las versiones para móviles y esto lo vas a poder hacer directamente desde cuando estás personalizando la página, que ya sabéis que Elementor tiene un panel en el que a la izquierda te salen las opciones y luego pues tú ves visualmente los cambios que vas haciendo, pues en el panel de la izquierda, que es donde configuras todo, siempre que veas un iconito como con una forma de pantalla, lo puedes pulsar y se desplegarán las opciones para que elijas si quieres editar la versión en móvil, la versión en tablet o la versión en ordenador. Y además si por ejemplo, al igual que con el personalizador de WordPress, que puedes por ejemplo ver la versión móvil de la web en la opción de previsualizar y la versión tablet, pues lo mismo con el editor de Elementor. Así que si por ejemplo estás en la versión para móviles, las opciones que te van a salir, siempre y cuando esa opción soporte que se edite solo para móvil, pues se van a aplicar al móvil y si estás viendo la previsualización para iPad, pues lo que apliques se va a aplicar al iPad. Sabiendo esto, que es importante antes de que entre en detalle, pues ya sí que nos podemos ir con el primero de los cinco consejos, que no es más que tener en cuenta el tamaño de las fuentes para móviles, porque esto es una de las cosas más habituales, que ponemos un título grande que queda súper chulo en pantallas grandes, que a lo mejor ocupa toda la primera media parte a lo mejor incluso de la página, pero claro, un texto óptimo para leer en pantallas grandes puede ser terrible en pequeños dispositivos. Lo típico que cuando se pasa la versión en móvil, ese título te ocupa toda la pantalla de móvil y eso pues no parece tener el mayor de los sentidos, depende de lo que estés haciendo, pero normalmente a mí me interesa que se vea un poquito más lo de abajo para que anime a la gente a hacer scroll y que vaya viendo un poco de qué va esa página. De nuevo, repito, depende de tu objetivo, pero rara vez es interesante que se ocupe toda la pantalla de un dispositivo móvil para simplemente ver el título de la página, ¿De acuerdo? Así que para esto nada más que tienes que irte con la caja de texto que tengas marcadas, te vas a estilo, te vas a tipografía y asegurándote de que estás en la versión para móvil, pues editas el tamaño de letra y también puedes editar más cosas, pero en este caso entiendo que vas a querer tener los mismos estilos, simplemente querrás cambiar el tamaño, incluso en algunas ocasiones puede ser interesante cambiar la alineación. A lo mejor lo tienes centrado para pantallas grandes, pero te interesa tenerlo alineado a la izquierda para pantallas más pequeñas. Pues esto te puedes ir de nuevo con la caja de texto seleccionada, te vas a la opción de contenido y en alineación podrás elegir una alineación distinta para dispositivos móviles. Y esto en cuanto a títulos, pero hay veces también que el texto en sí, el texto de nuestros artículos, pues a lo mejor queda demasiado pequeño para dispositivos móviles. Pues aquí haces lo mismo pero aumentando el tamaño de letra. Fantástico. Nos vamos con el segundo consejo que es invertir columnas. Este consejo me encanta porque ¿Cuántas veces has hecho un diseño en dos columnas? Lo típico, imagen a la izquierda, texto a la derecha y luego abajo texto a la izquierda, imagen a la derecha. Esto es un diseño súper típico y gracias a Elementor pues va a ser responsive automáticamente realmente. Pues tú pones este diseño en dos columnas, incluso ya hay plantillas prediseñadas que puedes cargar y tendrán ya este diseño fantástico y se hace el responsive y en teoría no tienes que hacer nada, pero hay veces que en los dispositivos móviles aparece texto, imagen, imagen, texto, porque claro, se pone todo en una columna y como en ordenador, en pantalla grande has hecho eso de que primero en una salga la imagen y luego el texto y en la otra inviertes y pones que salga el texto y luego la imagen, porque pues al ponerlo todo en una columna hacia abajo se te puede quedar raro o te puede quedar imagen, texto, texto, imagen, o si lo has hecho al revés, pues texto, imagen, imagen, texto. Entonces Elementor tiene una opción que es una maravilla para invertir las columnas cuando se está en dispositivo móvil. Para eso selecciona la sección donde tengas estas columnas, te vas a avanzado, ahí hay una parte que es responsive y ahí marcas la opción de columnas invertidas y automáticamente ya te saldrá de forma correcta. Esto es uno de los consejos que sé que si no lo tenías en cuenta te va a ayudar un montón. Genial, nos vamos con el siguiente, el tercer consejo que es tener un ancho de columna responsive. Siguiendo con el tema de las columnas, cuando estás trabajando está muy bien que el responsive se haga automático y ya hemos visto, ya te he comentado que elementor lo hace. ¿Pero qué pasa si en móvil en lugar de que te quede todo en una columna, como este ejemplo que te digo, pues quieres que salgan también en móvil dos o tres elementos en la misma línea y que no se bajen automáticamente a la siguiente columna? Pues puedes, puedes hacerlo. Imagina que tienes, pues no lo sé, el ejemplo que te he comentado de una página de venta y estás pues tienes lo típico de cuatro características del producto, del infoproducto que estás vendiendo y en ordenador tienes cuatro iconos uno al lado del otro explicando cuatro fantásticas características de tu producto. Bien, cuando lo pones en modo móvil de pantalla aún más pequeña, pues lo que pasa es que eso que estaba en cuatro columnas se va a ir poniendo una debajo de la otra y. Y se va a ver todo en una misma columna. ¿Cómo puedes hacer para que por ejemplo queden 2 y 2? Pues más sencillo de lo que pareces. Seleccionas las columnas, ya sabes que en Elementor tenemos la sección, dentro de la sección podemos insertar columnas y luego dentro de las columnas podemos insertar widgets o los elementos de Elementor, pues digamos que en este caso debes seleccionar la columna en la que tengas esos cuatro elementos, te vas a la opción de layout y modificas el ancho de columna de nuevo, siempre asegurándote de que estás modificando el de móvil. Y ahí por ejemplo, imagínate que Si quieres poner 2 y 2, pues modificas el porcentaje de ancho que quieras, eso tienes que hacerlo una a una, en la primera columna pues das 50%, en la segunda 50%, en la tercera 50 y en la cuarta 50. De esa forma te van a quedar dos y dos, las dos primeras ocuparán el 100% y las dos siguientes el 100%, pero lógicamente si quisieses tres pues 33% y así, o incluso si quieres, imagínate que tienes tres y que en móvil quieres que te salgan dos y luego una, o una y luego dos, pues una la dejas al 100% y las dos Siguientes le das 50% y 50%, es decir, puedes jugar bastante con los espacios y con la distribución de los elementos, no tienes que quedarte con el responsive que se hace de forma automática de tus columnas. Genial. Nos vamos con el consejo número 4 que va sobre padding y margin y esto es importante, son conceptos que debes interiorizar cuanto antes, porque es muy típico encontrarte con, por ejemplo, demasiado espacio cuando pasas de la versión del ordenador a la versión móvil. Pues porque en ordenador es una pantalla grande y además cada vez se enfoca todo a un diseño más minimalista y entonces se dejan muchos espacios, pero luego claro, pasas a la versión móvil y hay unos espacios ahí tremendos, aunque estén en proporción se siguen viendo demasiado grandes y es lo que te comentaba antes, en móvil sí está bien que dejes aire, pero se desperdicia mucho espacio, a la gente la podemos perder si entra en una página y ahí nada más que hay espacio y te sale al principio nada más llegar un pedazo de título, bajas y tienes un montón de espacio que bajar y luego ya te viene el siguiente contenido, en fin, no es lo más óptimo, ¿No? Entonces aquí yo te recomiendo pues pasarte a la versión móvil y seleccionar a lo mejor la sección donde tú ves que hay mucho espacio o el elemento donde tú ves que hay mucho espacio e irte a la parte de margin y padding que lo tienes en las opciones avanzadas y ahí prueba por ejemplo a poner el margen a cero y ves qué pasa cuando lo pones a cero y ves si hay mucho espacio y si hay poco espacio, si poniéndolo a cero se queda perfecto, pues fantástico, si no, pues le das un poquito y lo vas aumentando. Incluso si ves que poniéndolo a cero no te hace caso, te recomiendo elegir el otro elemento, por ejemplo, si has escogido el elemento de abajo y le has puesto de margen cero y ves que no se acaba de acercar al elemento de arriba, te vas al elemento de arriba y le das también margen cero a ver qué pasa. ¿Que en ninguno de los casos se queda como quieres? Pues entonces debes darle margen negativo, margin negativo, o por arriba al de abajo o por abajo al de arriba, ¿De acuerdo? Sé que puede ser un poco lioso, pero es cuestión de ir jugando un poco con los valores. Sí, eso en cuanto a espacios entre elementos. Pero luego también es muy común que los textos se queden demasiado apretados, eso es porque seguramente tengan demasiado padding los textos propios de un artículo o de una página descriptiva donde tengas más texto. Hay veces en las que lo estás leyendo y ves que sobra mucho por los lados, pues ahí de nuevo te vas a avanzado estilos, te vas al padding y lo editas, pues yo que sé, le das 5 píxeles a ver qué tal queda, 2 píxeles, pruebas 0 a ver cómo quedaría con 0 y vas ajustando y bueno, no he definido pero básicamente el margin es el espacio de los elementos con respecto a otros elementos, se puede incluso elegir solo personalizar el margin de arriba top margin, el de abajo bottom, el de la derecha right o el de la izquierda left, y lo mismo con el padding, tienes control sobre arriba, abajo, derecha e izquierda, y el padding en este caso sería el espacio alrededor de un elemento, el padding es con respecto de sí mismo, el elemento le vas dejando espacio dentro de lo que ocupa en sí ese elemento, sin embargo el margin es el espacio con respecto a los elementos que lo rodean, y recuerda que padding, el margin lo editas eligiendo el elemento que quieras editar o columna o la sección y te vas a avanzado estilos y ahí tienes el margin y el padding. Y el quinto y último consejo es ocultar y mostrar elementos dependiendo del dispositivo desde que se acceda a la página o del tamaño de la pantalla, porque no sé si sabías que puedes crear elementos solo visibles en el móvil y otros que solo estén visibles en pantallas grandes, y esto puede dar muchísimo juego y además puedes optimizar al máximo la experiencia de tus usuarios. Por ejemplo, algo que creo que nos va a quedar muy claro, imagina que tienes un botón para descargar una aplicación o un botón para que te contacten por WhatsApp, que ya os enseñé en un vídeo de la zona código, os dejo el enlace cómo hacerlo por código sin plugins ni nada, pues por ejemplo estas dos cosas, tanto descargar una app como que te contacten por WhatsApp, si bien por WhatsApp pues ya se puede por web WhatsApp, pero bueno, al final no es lo más óptimo si la persona no lo tiene vinculado, lo que sea, pero bueno, en fin, que por ejemplo un botón para descargar una app no tiene mucho sentido que te salga en un ordenador, y se ve, se ve muchísimo que sale cuando realmente puedes hacer que se muestre únicamente en dispositivos móviles, o imagina que estás promocionando algo que tiene aplicación pero luego también tiene un software descargable para ordenador, es decir, aplicación de móvil y software para ordenador, pues podrías hacer fácilmente que el botón para descargar la app se oculte en ordenador y que el botón para descargar el software se oculte en móvil. Y como digo, esto es muy sencillo. Te vas a avanzado, responsive y ahí marcas la opción de ocultarlo. Pues puedes elegir ocultar en ordenador, ocultar en tablet y ocultar en móvil. Y esto es con un elemento concreto, pero puedes hacerlo con secciones enteras, con columnas, está muy bien. Eso sí, ten cuidado que no vaya a destrozar el diseño que tengas, ¿De acuerdo? Ni que tampoco te vuelvas loco creando una página entera para móvil y otra entera distinta para ordenador. Aquí lo que te recomiendo es que la versión que hagas sea lo más responsive, lo más óptima posible. Lo que pasa es que hay veces que un elemento concreto no quieres que salga en móvil o que no quieres que salga en ordenador, pero esto no está pensado, o al menos yo no lo aconsejo para que hagas dos versiones totalmente distintas de una página. Lo ideal es que los contenidos se vayan optimizando y que queden bien tanto en móvil como en ordenador, sin necesidad de que andes ocultando muchas secciones o páginas enteras. Así que con esto hemos repasado cinco sencillas opciones de Elementor para trabajar la parte responsive de tu web. A ver, como consejo general, ¿Qué te recomiendo yo? Diseñas tu página, ¿No? Pues antes de publicar, antes de quedar contento, como puedes ver directamente ahí las versiones de móvil y de tablet, aunque también te recomendaría revisarlas en un móvil y en una tablet, pero bueno, ahí lo puedes ver, una previsualización, ya después podrás ser más quisquilloso. Pues cuando termines de diseñar la página, revisa bien esas versiones y si ves, por ejemplo, que alguna de las cosas que hemos comentado, pues un título se ve demasiado grande, ocupa demasiado, pues rápidamente lo corriges para la versión en móvil y vas ajustando esos pequeños detalles directamente ahí en el mismo editor de Elementor y te va a quedar todo mucho más pulido, mucho más apetecible para tu visitante, ya sea que acceda desde ordenador, móvil o tablet. Sí, fantástico. Bueno, recuerda que te he dejado un montón de enlaces en Gonzalo es 188 y ahí tienes también la opción de apuntarte. Ya sabes que puedes acceder al área para suscriptores sin compromiso alguno, puedes probarla, tienes 15 días, si ves que no te gusta pues me contactas, oye Gonzalo, que no quiero seguir y no hay problema, te devuelvo el dinero sin preguntas. Ahí tendrás, como ya sabes, acceso a más de 40 cursos más uno nuevo o una renovación completa de uno existente al mes, más de 130 vídeos, ya te he dicho el 139 de la zona código, así que imagínate. Y por supuesto, soporte conmigo cualquier duda que te surja sobre WordPress, sobre lo que estés haciendo, me contactas y te ayudo en lo que pueda. Todo ello, recuerda, en GonzaloNavarro es cursos. Fantástico. Nada más por este episodio, nos seguimos escuchando. Adiós.