Mostrar imágenes diferentes en las versiones Desktop y Mobile de Web Builder

En Web Builder es posible personalizar el contenido que se muestra en las versiones Desktop y Mobile de una página. Esto resulta especialmente útil cuando se desea utilizar imágenes diferentes según el dispositivo desde el cual accede el visitante.

Es importante tener en cuenta que un mismo elemento Imagen no puede contener archivos distintos para cada versión. Sin embargo, es posible lograr este comportamiento utilizando dos elementos de imagen independientes y controlando su visibilidad en cada dispositivo.

Acceso a las vistas Desktop y Mobile

Dentro del editor de Web Builder encontrarás, en la parte inferior de la pantalla, dos opciones representadas por íconos:

• Desktop
• Mobile

Al seleccionar cualquiera de estas opciones, el editor mostrará la versión correspondiente de la página, permitiéndote visualizar y modificar el contenido específico para ese dispositivo.

Objetivo

Mostrar una imagen en la versión Desktop y una imagen diferente en la versión Mobile.

Resultado esperado

Paso 1: Agregar la imagen para Desktop

1. Accede a la vista Desktop.
2. Arrastra un elemento Imagen desde el panel de contenidos hacia la página.
3. Selecciona la imagen que deseas mostrar en computadoras de escritorio.
4. Ajusta su tamaño, posición y estilos según sea necesario.

Una vez finalizado este paso, la imagen será visible tanto en Desktop como en Mobile hasta que modifiques su visibilidad.

Paso 2: Ocultar la imagen en Mobile

1. Cambia a la vista Mobile utilizando el selector ubicado en la parte inferior del editor.
2. Selecciona la imagen que acabas de agregar.
3. En el panel de estilos, localiza el ícono de visualización (representado por unos ojos).
4. Presiona dicho ícono para ocultar el elemento en la versión Mobile.

Después de realizar esta acción:

• La imagen seguirá visible en Desktop.
• La imagen dejará de mostrarse en Mobile.

Paso 3: Agregar la imagen para Mobile

1. Permaneciendo en la vista Mobile, agrega un nuevo elemento Imagen.
2. Selecciona la imagen que deseas mostrar exclusivamente en dispositivos móviles.
3. Configura su tamaño y posición según corresponda.

En este momento la nueva imagen será visible tanto en Mobile como en Desktop.

Paso 4: Ocultar la imagen Mobile en Desktop

1. Cambia nuevamente a la vista Desktop.
2. Selecciona la segunda imagen que agregaste.
3. Desde el panel de estilos, utiliza el ícono de visualización para ocultarla en Desktop.

Después de este paso:

• La primera imagen será visible únicamente en Desktop.
• La segunda imagen será visible únicamente en Mobile.

Resultado final

Al finalizar la configuración tendrás dos elementos de imagen independientes:

Imagen Desktop

• Visible en Desktop.
• Oculta en Mobile.

Imagen Mobile

• Visible en Mobile.
• Oculta en Desktop.

De esta manera podrás optimizar la experiencia visual para cada dispositivo y mostrar imágenes específicamente diseñadas para computadoras de escritorio o dispositivos móviles.

Recomendaciones

• Utiliza imágenes optimizadas para cada dispositivo.
• Para Mobile, prioriza imágenes verticales o con menos contenido visual.
• Verifica siempre la visualización en ambas versiones antes de publicar la página.
• Mantén una coherencia visual entre ambas imágenes para que la experiencia del usuario sea uniforme.

Conclusión

Aunque Web Builder no permite asignar dos imágenes diferentes a un mismo elemento, es posible conseguir el mismo resultado utilizando dos elementos de imagen independientes y controlando su visibilidad mediante las opciones de Desktop y Mobile. Esta técnica permite adaptar mejor el contenido a cada dispositivo y mejorar la experiencia de navegación de los visitantes.