Cómo trabajar con el widget de imagen en Elementor

Como dice el dicho. “Una imagen vale más que mil palabras.” A veces es mucho más fácil enviar un mensaje a través de una imagen. También se aplica al diseño web. Es casi imposible diseñar una página web sin involucrar un elemento de imagen. Al ser un instrumento que pone el diseño en el acento, Elementor lo ayuda a agregar una imagen a su diseño, dando el widget de la imagen. Simplemente puede extraer el widget de imagen en el área de lienzo para agregar un elemento de imagen. No solo puede agregar una imagen estática, sino que puede agregar una imagen dinámica al elemento. Esta característica (la capacidad de agregar una imagen dinámica) es especialmente útil para crear una plantilla personalizada, como una sola publicación personalizada, una página de categoría personalizada, encabezado personalizado, etc., utilizando el generador de temas elementales. El widget de imagen en sí está disponible en ambas versiones de Elementor (léase: Elementor Free vs Elementor Pro), pero para poder agregar una imagen dinámica, debe usar la versión Pro.
Cómo agregar una imagen al elemento antes de continuar, suponga que ya sabe cómo usar el elemento. Si es nuevo en el elemento, puede leer nuestro artículo anterior para averiguar cómo usarlo. En el editor de elementor, simplemente extraiga el widget de la imagen del panel izquierdo en el área de lona, ​​luego haga clic en el selector de imágenes para seleccionar la imagen que desea usar.

Agregar una imagen dinámica Para agregar una imagen dinámica, puede cruzar el mouse a través del selector de imágenes y hacer clic en el icono de la base de datos y seleccionar la imagen dinámica que desea agregar de las opciones disponibles. Luego puede hacer clic en la tecla de icono para seleccionar la alternativa . Fallback en sí es el contenido predeterminado que se mostrará cuando el contenido dinámico no está disponible. En este caso, la reversión es la imagen predeterminada que se mostrará cuando Elementor no pueda encontrar la imagen dinámica.

A la estilización de la imagen para estilizar la imagen, puede acceder a la pestaña Estilo en el panel de configuración (el panel de la izquierda). Antes de acceder a la pestaña Estilo, puede establecer el tamaño de la imagen, la alineación de la imagen y agregar un enlace a la imagen en el bloque de imágenes en la pestaña de contenido. En la pestaña de estilo, puede establecer el radio del borde, puede aplicar filtros CSS, puede establecer el tamaño personalizado, la opacidad y aplicar una sombra de la caja.

Configuración de la dimensión personalizada
En el bloque de imágenes en la pestaña de contenido, puede establecer el tamaño de su imagen. Si desea establecer un tamaño personalizado, simplemente puede establecer el valor de ancho y el valor de altura en el bloque de imágenes en la pestaña de estilo. Puede usar si la unidad porcentual, el píxel o el ancho de la ventana de visualización (VW).
Configuración de la opacidad de la imagen

Para establecer el nivel de opacidad de la imagen, simplemente puede deslizar el ajuste en la opción de opacidad en el bloque de imágenes en la pestaña de estilo. Puedes ver el nivel de opacidad de 0 a 1.
Aplicación de filtros CSS

Si lo desea, puede aplicar filtros CSS a su imagen para agregar ciertos efectos de imagen. Hay 5 opciones de filtración que puede aplicar: desenfoque, brillo, contraste, saturación y sombra. Simplemente haga clic en el icono del lápiz en la opción Filtro CSS y configure los valores del filtro CSS que desea mediante ajustes deslizantes.
Para que la imagen se vea más convincente, puede establecer el borde. Para agregar el marco, primero, seleccione el tipo de borde en la opción Tipo de borde. Luego puede establecer el ancho del borde, el color del borde y el rayo de la frontera.

Por cierto, el radio del margen es el nivel de inclinación de las esquinas en la imagen (mención arriba, arriba, abajo, la derecha, abajo a la izquierda). Cuanto mayor sea el valor del borde, más se redondeará su imagen.
Aplicando una sombra de boxeo

Para aplicar una sombra de la caja, simplemente puede hacer clic en el icono del lápiz en la opción Sombra de la caja. Seleccione el color de la sombra y establezca el valor de la orientación horizontal, la orientación vertical, el nivel de desenfoque y el nivel de propagación.


Configuración avanzada Para hacer una configuración de imagen avanzada, puede abrir la pestaña avanzada desde el panel de configuración. Desde este panel, puede establecer cosas como el borde y el relleno, la animación de entrada, CSS personalizado, etc.
Establecer el margen y el relleno

Para establecer el borde y llenar la imagen, puede abrir el bloque avanzado. Puede leer este artículo para obtener más información sobre el borde y el relleno.
Aplicando una animación de entrada
Para que la imagen parezca más convincente, puede aplicar una animación de entrada. Para hacer esto, puede abrir el bloque de movimientos. Desde este bloque, también puede establecer los efectos de contaminación, el efecto del mouse y la opción pegajosa. Para aplicar una animación de entrada, simplemente el estilo de animación de entrada de la opción de animación de entrada. Ajuste de un CSS personalizado

Si tiene conocimiento de CSS, puede agregar CSS Custom al widget de imagen. Para agregar CSS personalizado, simplemente puede abrir su bloque CSS personalizado y pegar el código CSS al campo disponible.
Ocultar la imagen en un tipo particular de dispositivo

En el elemento, puede usar una configuración diferente en un widget particular para diferentes tipos de dispositivos. También puede establecer un widget para deshabilitar en un tipo particular de dispositivo. Por ejemplo, puede deshabilitar el widget de imagen en su tableta. Para hacer esto, puede abrir el bloque receptivo. Deslice los botones para ocultar el widget en un dispositivo en particular.
Configuración de la posición personalizada

Al agregar una imagen al elemento, la posición predeterminada se establece en Static (predeterminado). Hay otras dos opciones de posición que puede establecer: fijo y absoluto. – Corrección: si selecciona esta opción, la imagen se colocará en relación con el puerto de visualización del usuario – Absolutamente: si selecciona esta opción, la imagen se colocará absolutamente en la primera posición. Para establecer la posición personalizada, puede abrir el bloque de posicionamiento en la pestaña avanzada. Seleccione la posición personalizada que desea establecer en la opción de posición y establezca el espacio de orientación horizontal.