Una de las herramientas más significativas que ofrece Elementor, que lo ha convertido en el editor de contenidos más popular de la actualidad, es el modo adaptable (RESPONSIVE).
Con el modo adaptable podemos realizar 3 diseños a la vez, escritorio, tableta y móvil, con solo cambiar un par de valores en las secciones, columnas y widgets y visualizar correctamente nuestro sitio web en cualquier dispositivo.
A partir de ahora, para entender la "jerga" de Elementor, nos vamos a referir a los dispositivos de la siguiente forma:
Cuando diseñamos una página (o entrada), nos encontramos con el icono ubicado en la barra inferior del panel de Elementor.
Este icono representa el modo adaptable en Elementor y es con el que podemos visualizar en tiempo real como va quedando nuestro diseño, en escritorio, tableta y móvil, para realizar los cambios necesarios.
Y ya está. Lo único que necesitas saber es que este icono se utiliza para VISUALIZAR el contenido en todos los dispositivos.
Anuncio publicitario
Para ver el funcionamiento del modo adaptable en una sección vamos a poner un ejemplo:
Vamos a crear una sección de 1 columna (como lo vimos en las lecciones anteriores) y vamos a subir una imagen de fondo diferente para cada dispositivo.
Seleccionamos la sección y nos dirigimos al apartado Estilo. En la pestaña Fondo hacemos clic en el icono Clásico ().
Fíjate que en el campo Imagen podemos apreciar el icono que es el modo actual en el que estamos trabajando (Escritorio). Si hacemos clic en este icono, se desplegarán el resto de iconos del modo adaptable.
Vamos a subir la primera imagen en Escritorio:
Ahora, desplegamos los iconos de modo adaptable, hacemos clic en el icono Tableta () y subimos la segunda imagen:
Por último, hacemos clic en el icono Móvil () y subimos la tercera imagen:
Como has podido apreciar, en cada uno de los dispositivos, podemos añadir una imagen diferente de fondo a la sección sin interferir en el del resto de dispositivos.
Esta poderosa herramienta de Elementor nos permitirá crear múltiples diseños, según el tipo de dispositivo, en tiempo real.
En la lección, fondos en Elementor, veremos con más detalles, como añadir colores planos y degradados e imágenes de fondo en secciones y columnas.
Para ver el funcionamiento del modo adaptable en una columna vamos a poner un ejemplo:
En la lección, columnas en Elementor, conocimos una de las propiedades más importantes de las columnas: el Ancho de la columna. Esta propiedad es la que nos permitirá adaptar las columnas en versión RESPONSIVE.
Vamos a crear una sección de 4 columnas (como lo vimos en la lección anterior) y vamos a insertar 4 imágenes diferentes en las columnas para que puedas apreciar mejor el ejemplo.
En Escritorio, cada columna tendrá un ancho de 25%. Lo dejaremos de esa manera ya que queremos que nuestro diseño en escritorio sea simétrico.
No te preocupes ahora si no he mostrado cómo insertar las imágenes. Solo quiero que aprecies el modo adaptable en las columnas ya que es bastante importante que entiendas ente concepto.
En la lección, imágenes en Elementor, veremos con más detalle como subir y configurar imágenes.
Ahora, vamos a cambiar a modo Tableta desde el modo adaptable ubicado en la barra inferior del panel de Elementor.
Nos quedaría algo así:
Las columnas siguen teniendo 25% de ancho cada una pero las imágenes se han adaptado a la resolución de la pantalla.
Esto se debe a que trabajamos en porcentaje y el TODO siempre va a ser 100% mientras que las imágenes son físicas, las medidas vienen expresadas en píxeles (px) y se adaptan al espacio disponible en cada columna.
Vamos a complicarlo un poco...
Imagínate que en nuestro diseño para tabletas queremos que, las imágenes azul y verde se encuentren en la primera fila y, las imágenes roja y amarilla, en la segunda.
Aquí es donde entra en juego nuestro amigo Ancho de la columna.
Seleccionamos la primera columna y, en el campo Ancho de la columna, escribimos 50 (recuerda que el valor ya está en porcentaje por lo que no hace falta escribir el símbolo %).
Repetimos el mismo proceso para el resto de columnas y el resultado será este:
Ta-chan! Hemos conseguido el diseño que queríamos con solo modificar 1 valor de cada columna. Además hemos podido ubicar columnas en HORIZONTAL y VERTICAL dentro de una misma sección.
Pero aún hay más. Si volvemos al modo Escritorio, las imágenes se mantienen en 1 sola fila. El cambio que acabamos de realizar en modo tableta, no afecta al diseño en escritorio.
A modo recordatorio...
Cuando hablamos de secciones, te comenté que las secciones solo se pueden ubicar en formato VERTICAL (arriba y abajo). Nunca se podrán ubicar las secciones una al lado de la otra (HORIZONTAL).
En el caso de las columnas no es así. Solo en escritorio, se pueden ubicar en formato HORIZONTAL. En tableta y móvil, se pueden ubicar en formato HORIZONTAL y VERTICAL para lograr el diseño deseado, como lo acabamos de hacer.
Por último, vamos a cambiar nuestro diseño al modo Móvil. Veríamos lo siguiente:
En este caso, el ancho de cada columna adopta el valor de 100% al encontrarse en una resolución de pantalla más pequeña.
Ahora vamos a complicarlo un poco más...
Imagínate que en nuestro diseño para móviles queremos que, la imagen azul se encuentre en la primera fila; las imágenes verde y roja, en la segunda y, la imagen amarilla, en la tercera.
Como la imagen azul ya se encuentra en la primera fila, solo tenemos que editar el Ancho de la columna de las imágenes verde y roja indicando un valor de 50.
Las imágenes verde y roja ahora se ubican en la segunda fila y, la imagen amarilla, ha pasado a la tercera fila consiguiendo el diseño que queríamos en modo Móvil.
Como puedes apreciar, las imágenes verde y roja han reducido su tamaño debido a que tienen que adaptarse al ancho de la columna. Ten en cuenta que este es un ejemplo para que aprecies cómo se trabaja con el modo adaptable en Elementor.
Cuando realicemos un "diseño real", tenemos que diseñar las imágenes (o elementos) de acuerdo a la estructura que queramos.
Al igual que sucede con las secciones y columnas, los widgets también poseen, en algunos parámetros, la posibilidad de indicar valores diferentes para cada modo adaptable. Veamos un ejemplo:
Vamos a crear una sección de 5 columnas y vamos a insertar 5 iconos diferentes en las columnas para que puedas apreciar mejor el ejemplo.
En la lección, iconos en Elementor, veremos con más detalle como subir y configurar iconos.
Aunque aún no hemos hablado de los widgets en este curso, al igual que las secciones y las columnas, los widgets se pueden seleccionar y editar haciendo clic en el icono Editar. Este aparece cuando pasamos el puntero del ratón por encima del widget.
Si seleccionamos el primer icono y, nos dirigimos al apartado Estilo, podemos ver las propiedades de edición de estilo del icono.
Fíjate que los campos Tamaño y Rotar ofrecen el icono de modo adaptable. Esto significa que, para cualquier modo: escritorio, tableta y móvil, podemos definir valores diferentes según nuestras necesidades.
Comenzamos con un ejemplo...
Por defecto, los iconos tienen un tamaño de 50px. En el modo Escritorio queremos que los iconos tengan un tamaño de 80px.
Para esto, seleccionamos cada uno de los iconos y, en el campo Tamaño, escribimos 80 (no hace falta escribir "px" en el campo). También podemos modificar el tamaño moviendo la barra horizontal a los lados.
Nos quedaría algo así:
Vamos a complicarlo un poco...
En modo Tableta queremos que el primer icono se encuentre en la primera columna a 80px pero los iconos 2 y 3 se encuentren en la segunda fila a 50px y los iconos 3 y 4 en la tercera fila a 50px.
Si cambiamos a modo Tableta veremos lo siguiente:
Fíjate que los iconos siguen siendo grandes. En el ejemplo de las columnas (punto 3), las imágenes no mantuvieron su tamaño al pasar a modo Tableta. Esto es porque cambiamos el ancho de las columnas pero no alteramos el tamaño de las imágenes.
Ahora, el tamaño que hemos indicado a los iconos en modo Escritorio, lo han adoptado los iconos en modo Tableta.
Una regla muy importante en Elementor...
Todos los valores que indiquemos en un widget en un modo de resolución superior, los adoptará el widget en el(los) modo(s) de resolución inferior(es) mediante la regla: ESCRITORIO >> TABLETA >> MÓVIL.
Este regla no se aplica en sentido inverso; es decir:
Continuando con el ejemplo lo que tenemos que hacer es muy sencillo:
Nos quedaría algo así:
Por último, solo nos quedaría ver cómo funciona el modo adaptable en los widgets en modo Móvil.
Ahora te toca a ti...
En modo Móvil quiero que en la primera fila se encuentren los 3 primeros iconos. El primero y tercero a 30px y el segundo (en el centro) a 50px. En la segunda fila, el resto de iconos a 75px.
Además quiero que todos los iconos estén centrados verticalmente y, el icono del cohete, mire hacia la izquierda.
Debería quedarte algo así:
¿Te ha quedado igual?
La adaptabilidad o visibilidad adaptativa en Elementor, es una propiedad que ofrecen las secciones, columnas y widgets desde el apartado Avanzado. Esta propiedad nos ofrece más posibilidades en el diseño de nuestro sitio web.
En las columnas y widgets, la adaptabilidad se presenta de la siguiente manera:
Se compone de 3 botones para ocultar o mostrar la columna o el widget en cualquiera de los 3 modos: escritorio, tableta y móvil.
Ya está. No tiene mas historia. Simplemente usaremos esta propiedad cuando la necesitemos.
Caso de uso...
Volviendo al ejemplo anterior de los 5 iconos, imagínate que solo queremos mostrar los primeros 4 iconos en Escritorio y los últimos 3 iconos en Tableta y Móvil.
Usando la Adaptabilidad en las columnas, podemos ocultar la última columna en Escritorio, las 2 primeras columnas en Tableta y Móvil y ajustar los anchos de la columna en cada caso. Así de fácil.
En las secciones esta propiedad funciona exactamente igual que con las columnas y los widgets y, además, contamos con 2 botones adicionales para invertir las columnas.
Para que lo puedas entender mejor veamos el siguiente ejemplo:
Este diseño está compuesto por 2 secciones de 2 columnas cada una. Básicamente son un par de textos con una numeración pero en formato Zig Zag porque así lo queremos mostrar en nuestro sitio web.
Si cambiamos a modo Tableta veríamos lo siguiente:
Se mantiene el diseño y los textos se ajustan al ancho de las columnas. Lo dejamos así porque se sigue viendo bien.
Ahora cambiamos a modo Móvil.
En este caso el diseño no se ve bien.
¿Cómo lo solucionamos?
Muy fácil. Con la propiedad Adaptabilidad de las secciones.
Seleccionamos la segunda sección, activamos la opción Columnas invertidas (Móvil) y listo.
Como has podido apreciar, esta propiedad que ofrece Elementor es muy útil para desarrollar innumerables diseños en cualquier dispositivo según nuestros requerimientos.
Anuncio publicitario
Es muy importante que conozcas y te familiarices muy bien con el modo adaptativo en Elementor (RESPONSIVE) ya que cada vez son más los sitios web que se visitan desde dispositivos móviles.
Recuerda que un buen diseño mejora la EXPERIENCIA DEL USUARIO y esto se traduce en un buen SEO.
Si aún no tienes Elementor PRO este es el momento perfecto para que te hagas con este fantástico editor de contenidos.
Va a ser parte importante de este curso. Desarrollaremos muchas lecciones con este plugin para que aprendas a utilizarlo en su totalidad y sacar el máximo provecho para el desarrollo de sitios web 100% profesionales.
No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre WordPress.
Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.
Copyright © 2022 Curso de WordPress
Hecho con Venezolano!
Desarrollado con WordPress y diseñado con Hello Theme y Elementor.
Muy buen artículo. Gracias por el alto grado de detalle didáctico.
Hola Horacio, gracias a ti por comentar. Un saludo!
¡Muchas gracias, me ha venido de maravilla!
Gracias a ti Sonia por comentar. Un saludo!
Excelente aporte, muchas gracias.
Hola Carri, muchas gracias por tu comentario. Un saludo!