Elementor

Cómo insertar una imagen en Elementor

Cómo usar el Widget de Imagen en Elementor

Tabla de contenidos

¿Qué es el Widget de Imagen en Elementor?

Las imágenes son fundamentales a la hora de captar la atención en los sitios web. El Widget de Imagen te permite añadir y personalizar imágenes en tu sitio web diseñado con Elementor. Puedes subir imágenes nuevas o seleccionar alguna que ya tengas subida. También puedes ajustar su tamaño y alineación o aplicar filtros entre otras cosas.

¿Cómo usar el Widget de Imagen en Elementor?

Paso 1. Añade el Widget al lienzo

Widget de Imagen
Widget de Imagen

Haz clic en el Widget de Imagen, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Edita la pestaña de Contenido

Seleccionar imagen
Seleccionar imagen

En la pestaña de Contenido > Imagen > haz clic sobre el recuadro que pone «Seleccionar imagen».

Paso 3. Elige una imagen

Insertar medio en WordPress
Insertar medio en WordPress

Sube una imagen desde tu ordenador o selecciona una imagen que ya tengas subida en la Biblioteca de medios.

Paso 4. Elige una Resolución de imagen

Resolución de la imagen
Resolución de la imagen

Edita el campo Resolución de imagen para ajustar su tamaño. Puedes usar las imágenes creadas por WordPress, la imagen a tamaño completo o escribir un tamaño personalizado.

Paso 5. Añade una leyenda

Leyenda
Leyenda

Elige entre: Ninguno, Leyenda del adjunto o Leyenda personalizada para añadir un pie de foto.

  • Leyenda del adjunto: Usa el título existente en la Biblioteca multimedia de WordPress.
  • Leyenda personalizada: Te permite añadir un título único a tu imagen desde el editor de Elementor.
Estilo de Leyenda
Estilo de Leyenda

Si activas la leyenda, en Editar Imagen > Estilo > Leyenda > puedes editar el estilo de la leyenda.

Paso 6. Añade un Enlace

Usa el campo Enlace para añadir la opción de hacer clic en tu imagen. Puedes elegir entre: Ninguno, Archivo de medios y URL personalizada.

Archivo de medios
Archivo de medios
  • Si eliges “Archivos de medios” tienes la opción de abrir la imagen en un Lightbox. Selecciona Sí o No para activar esta función.
URL personalizada
URL personalizada
  • Si eliges “URL personalizada” haz clic en el icono de ajustes (⚙️) para configurar el enlace. Ahora tienes la opción de abrir en enlace en una nueva pestaña o añadir la etiqueta “nofollow”. Además, puedes añadir atributos personalizados al enlace. Para hacerlo, separa las claves de los valores usando el carácter ‘|’ (barra vertical) y separa los pares de valores-clave con una coma.

Paso 7. Alinea la imagen

Alineación
Alineación

En la pestaña de Estilo > Alineación > elige si quieres que tu imagen esté alineada a la derecha, al centro o la izquierda.

Paso 8. Elige un ancho de imagen

Ancho
Ancho

Usa el control deslizante para ajustar el ancho de la imagen.

Paso 9. Elige un ancho máximo

Ancho máximo
Ancho máximo

Usa el control deslizante para ajustar el ancho máximo de la imagen.

Paso 10. Elige el alto de imagen

Alto
Alto

Elige una altura para la imagen usando el control deslizante. Después de seleccionar la altura puedes elegir cómo encaja la imagen. Puedes elegir entre: Rellenar, Cubrir o Contener.

Ajuste del objeto:

  • Rellenar: Hace que la imagen ocupe todo el espacio, sin importar su forma.
Posición del objeto
Posición del objeto
  • Cubrir: Estira la imagen para que se ajuste al ancho, pero puede cortar partes de la misma. Si seleccionas esta opción puedes elegir la posición del objeto.
  • Contener: Mantiene toda la imagen dentro, pero es muy probable que veas bordes blancos a su alrededor.

Paso 11. Normal

Normal
Normal

Elige cómo se verá la imagen en estado normal.

  • Opacidad: Usa el control deslizante para ajustar la transparencia de la imagen.
  • Filtros CSS: Juega con los filtros que ofrece Elementor. Puedes elegir entre: difuminado, brillo, contraste, saturación y tono.

Paso 12. Al pasar el cursor

Al pasar el cursor
Al pasar el cursor

Elige cómo se ve la imagen al pasar el cursor por encima.

  • Duración de la transición: Usa el control deslizante para elegir la duración de la animación al pasar el cursor por encima.
  • Animación al pasar el cursor: Selecciona en el menú la animación que prefieras cuando alguien mueva el ratón sobre la imagen.

Paso 13. Añade un Tipo de borde

Tipo de borde
Tipo de borde

Selecciona un Tipo de borde entre: ninguno, continuo, doble, punteado, discontinuo o acanalado.

Paso 14. Añade un Radio de borde

Radio de borde
Radio de borde

Redondea los bordes de la imagen aumentando el radio del borde.

Paso 15. Añade una Sombra

Sombra de caja
Sombra de caja

Con la herramienta de sombra puedes elegir el color de la sombra, la borrosidad, y el desplazamiento vertical u horizontal.

Escrito por:

Richi Pérez

Richi Pérez

05/05/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Cuál es el color del signo de Aries? Signo: Aries Color: Rojo Planeta: Marte Gema/metal: Rubí Razón: Marte...

¿Qué es el widget de Ancla de menú en Elementor? El Widget de Ancla de menú en Elementor te...

¿Qué es el widget de HTML en Elementor? El Widget de HTML en Elementor te permite incrustar código...