Lección 09

Modo adaptable en Elementor

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:

  • Modo Escritorio: son las pantallas de los ordenadores (computadoras) de mesa (o lo que se conoce como Desktop). También suele funcionar para algunos portátiles (Laptos).
  • Modo Tableta: conocidas en algunos países también como Tablets.
  • Modo Móvil: conocidos en algunos países también como Celulares.
Índice del contenido
    Add a header to begin generating the table of contents

    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.

    Modo adaptable en Elementor
    Modo adaptable en 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

    2. Modo adaptable en secciones

    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.

    Modo adaptable en una sección
    Modo adaptable en una sección

    Vamos a subir la primera imagen en Escritorio:

    Imagen de fondo en una sección: Escritorio
    Imagen de fondo en una sección: Escritorio

    Ahora, desplegamos los iconos de modo adaptable, hacemos clic en el icono Tableta () y subimos la segunda imagen:

    Imagen de fondo en una sección: Tableta
    Imagen de fondo en una sección: Tableta

    Por último, hacemos clic en el icono Móvil () y subimos la tercera imagen:

    Imagen de fondo en una sección: Móvil
    Imagen de fondo en una sección: Móvil

    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.

    3. Modo adaptable en 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.

    Imágenes en columnas: Escritorio
    Imágenes en columnas: Escritorio

    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í:

    Imágenes en columnas: Tableta
    Imágenes en columnas: Tableta

    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:

    Imágenes en columnas: Tableta
    Imágenes en columnas: Tableta

    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:

    Imágenes en columnas: Móvil
    Imágenes en columnas: Móvil

    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.

    Imágenes en columnas: Móvil
    Imágenes en columnas: Móvil

    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.

    Iconos en una sección: Escritorio
    Iconos en una sección: Escritorio

    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.

    Icono Editar widget en Elementor
    Icono Editar widget en Elementor

    Si seleccionamos el primer icono y, nos dirigimos al apartado Estilo, podemos ver las propiedades de edición de estilo del icono.

    Modo adaptable en un icono
    Modo adaptable en un 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í:

    Iconos en una sección: Escritorio
    Iconos en una sección: Escritorio

    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:

    Iconos en una sección: Tableta
    Iconos en una sección: Tableta

    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:

    1. Editamos el ancho de la primera columna a 100% y resto de columnas a 50%.
    2. 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í:

    Iconos en una sección: Tableta
    Iconos en una sección: Tableta

    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í:

    Iconos en una sección: Móvil
    Iconos en una sección: Móvil

    ¿Te ha quedado igual?

    1. Suscríbete a este {blog} en el formulario que encontrarás al final de esta lección para contarte mas trucos como estos.
    2. Deja un comentario al final de la lección. Si lo has podido hacer, cuéntanos cómo lo has hecho.
    3. Te invito también a que te suscribas a mi canal de YouTube para que veas cómo lo hago en vivo y directo.

    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:

    Adaptabilidad en columnas y widgets en Elementor
    Adaptabilidad en columnas y widgets en Elementor

    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.

    Adaptabilidad en secciones en Elementor
    Adaptabilidad en secciones en Elementor

    Para que lo puedas entender mejor veamos el siguiente ejemplo:

    Diseño numerado en Zig Zag con Elementor: Escritorio
    Diseño numerado en Zig Zag con Elementor: Escritorio

    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:

    Diseño numerado en Zig Zag con Elementor: Tableta
    Diseño numerado en Zig Zag con Elementor: Tableta

    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.

    Diseño numerado en Zig Zag con Elementor: Móvil
    Diseño numerado en Zig Zag con Elementor: 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?

    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.

    Diseño numerado en Zig Zag con Elementor: Móvil
    Diseño numerado en Zig Zag con Elementor: Móvil

    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

    6. Conclusión

    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.

    Curso de WordPress

    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.

    ¿Te ha gustado?

    Te estaría muy agradecido si pudieras valorar esta lección y compartirla en las redes sociales. De esta manera me animas a continuar trabajando en este curso de Elementor y ayudas a otras personas que desean aprender.

    (7 votos, promedio: 5 de 5)

    Share on facebook
    Facebook
    Share on twitter
    Twitter
    Share on linkedin
    LinkedIn
    Share on telegram
    Telegram
    Share on whatsapp
    WhatsApp
    Share on email
    Email

    Este curso es gratis y siempre lo será pero, mantenerlo, requiere de mucho tiempo y esfuerzo. Si te gusta el curso y te ha ayudado, considera invitarme un café haciendo un pequeño donativo a este proyecto que he creado con el para ti y muchas personas que desean aprender. Las donaciones me ayudan a seguir trabajando en este fantástico curso gratuito. ¿Me invitas un café?.

    Suscríbete y aprende Elementor desde cero.

    No me gusta el SPAM y se que a ti tampoco. Sólo recibirás información útil sobre Elementor.

    Al enviar, confirmas que has leído y aceptas la política de privacidad. Conoce nuestro compromiso con tu privacidad.

    Comparte tu experiencia

    Deja un comentario si tienes alguna duda o cuéntanos cómo ha sido tu experiencia.

    guest
    0 Comentarios
    Inline Feedbacks
    Ver todos los comentarios
    0
    ¿Dejas un comentario? Gracias!x
    ()
    x
    Ir arriba

    Tratamiento de datos personales

    • Responsable: MARIA ANTONIETA BEAUTY CONCEPT, S.L.
    • Finalidad: Suscribirte a la lista de correos electrónicos.
    • Derechos: Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en legal@gianoliveira.com, así como el derecho a presentar una reclamación ante una autoridad de control.
    • Destinatarios: Los datos no se cederán a terceros salvo en los casos en que exista una obligación legal.
    • Información adicional: En mi política de privacidad encontrarás información adicional sobre la recopilación y el uso de su información personal incluida información sobre acceso, conservación, rectificación, eliminación, seguridad y otros temas.