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.
Tabla de Contenidos
1. Modo adaptable en una página (o entrada)
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.
2. Modo adaptable en secciones
Para ver el funcionamiento del modo adaptable en una sección vamos a poner un ejemplo:
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.
3. Modo adaptable en columnas
Para ver el funcionamiento del modo adaptable en una columna vamos a poner un ejemplo:
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.
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.
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:
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.
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.
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.
4. Modo adaptable en widgets
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.
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í:
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:
- Si aplicamos un valor a un widget en Escritorio, el widget adoptará este valor en Tableta y Móvil.
- Si aplicamos un valor a un widget en Tableta, el widget adoptará este valor en Móvil pero no en Escritorio.
- Si aplicamos un valor a un widget en Móvil, el widget no adoptará este valor en Escritorio ni Tableta.
Continuando con el ejemplo lo que tenemos que hacer es muy sencillo:
- Editamos el ancho de la primera columna a 100% y resto de columnas a 50%.
- Editamos el tamaño de los iconos 2,3,4 y 5 a 50px. En este caso, el tamaño del primer icono no lo editamos ya que ha adoptado el valor del modo Escritorio (80px).
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.
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í:
5. Adaptabilidad en Elementor
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.
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.
- En la primera sección el número 1 se encuentra encima del texto y eso está bien.
- En la segunda sección, el número 2 debería estar encima del texto para que el usuario entienda la información pero, como en los modos anteriores el número 2 se encuentra a la derecha, al cambiar a modo Móvil, el número 2 se ubica debajo del texto.
¿Cómo lo solucionamos?
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.
