Elementor

Cómo añadir un Cuadro de imagen en Elementor

Cómo añadir un Cuadro de imagen en Elementor

Tabla de contenidos

¿Qué es el Widget Cuadro de imagen en Elementor?

El widget de Cuadro de imagen une imagen, título y texto en un solo elemento. Es ideal para mostrar una imagen acompañada de información. Con este widget, puedes añadir una foto, un título y un texto en la página de servicios u otras partes de tu sitio web de forma organizada y creativa.

Puedes personalizar el tamaño, la alineación y el espaciado de la imagen y el texto según lo que necesites. Además, ofrece opciones para añadir superposiciones, efectos de desplazamiento y animaciones para hacer la experiencia más interactiva.

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

Paso 1. Añade el Widget al lienzo

Cuadro de imagen widget
Cuadro de imagen widget

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

Paso 2. Edita la pestaña de Contenido

Cuadro de imagen
Cuadro de imagen

En la pestaña de Contenido > Cuadro de 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 un Título

Título
Título

Usa el campo Título para escribir el texto que aparecerá en el Cuadro de imagen.

Paso 6. Escribe una descripción

Descripción
Descripción

Usa el campo Descripción para añadir una descripción en el Cuadro de imagen.

Paso 6. Añade un Enlace

Enlace
Enlace

Usa el campo Enlace para añadir la opción de hacer clic en tu Cuadro de imagen. Puedes elegir entre: Ninguno, Archivo de medios y 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. Asigna una etiqueta para el encabezado

Etiqueta HTML de título
Etiqueta HTML de título

Edita el campo Etiqueta HTML de título para seleccionar el tipo de etiqueta HTML de tu encabezado. Las opciones van desde el H1 hasta el H6, div, span y p.

Paso 8. Edita el Estilo de la Caja

Estilo de la Caja del Cuadro de imagen
Estilo de la Caja del Cuadro de imagen
  • Posición de la imagen: Ajusta la alineación de la imagen hacia la izquierda, arriba o hacia la derecha en relación con el título y la descripción. En dispositivos móviles la imagen permanecerá centrada.
  • Alineación: Coloca el cuadro de imagen a la izquierda, derecha, centro o justificado.
  • Espaciado de imagen: Usa el control deslizante para cambiar la distancia entre la imagen y el título.
  • Espaciado del contenido: Usa el control deslizante para cambiar la distancia entre el título y la descripción.

Paso 9. Edita el Estilo de la Imagen

Estilo de la Imagen del Cuadro de Imagen
Estilo de la Imagen del Cuadro de Imagen
  • Ancho: Usa el control deslizante para ajustar el ancho de la imagen de 0% a 100%.
  • Tipo de borde: Elige el tipo de borde que quieres usar alrededor de la imagen.
  • Radio del borde: Aumenta el radio del borde para crear esquinas redondeadas.
  • 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.
  • 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 10. Edita el Estilo del Contenido

Estilo del Contenido del Cuadro de Imagen
Estilo del Contenido del Cuadro de Imagen
  • Título: Edita el color, la tipografía, el trazo del texto y la sombra del texto.
  • Descripción: Edita el color, la tipografía y la sobra del texto.

Escrito por:

Richi Pérez

Richi Pérez

05/06/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Por qué usar fuentes y colores globales en Elementor? Para unificar el aspecto de un sitio web, es...

¿Qué es el widget de Valoración en Elementor? El Widget de Valoración en Elementor te permite añadir valoraciones...

¿Qué es el widget de Indicador de avance en Elementor? El Widget de Indicador de avance en Elementor...