Cómo mostrar imágenes en WordPress con Elementor: las formas creativas

No es ningún secreto que las imágenes son un componente importante de cualquier sitio web. Mejora el atractivo visual del sitio web y la participación. En WordPress, insertar imágenes en tus publicaciones y páginas es bastante fácil. 

Una forma de mostrar imágenes es simplemente agregando medios en el Editor clásico. Otra forma es utilizar los bloques Imagen en el editor Gutenberg. En ambos casos, los estilos están predefinidos en el tema.

Sin embargo, Elementor ofrece flexibilidad para mostrar imágenes en WordPress. Ofrece una variedad de formas creativas de mostrar imágenes en su sitio web. Más importante aún, cada elemento de la imagen se puede personalizar individualmente.

Usando elementos como Cuadros de imagen, Galerías de imágenes, Enmascaramiento de imagen
puedes crear secciones de imágenes de aspecto impresionante.

Con un poco de creatividad y atención al detalle, puedes hacer que tu sitio web se destaque entre la multitud utilizando esos elementos.

Este artículo lo guiará sobre cómo mostrar imágenes en WordPress con Elementor para diseñar una interfaz intuitiva y fácil de usar para mostrar imágenes en su sitio web.

Por qué las imágenes son importantes para el contenido de tu web

Cuando vemos una imagen, el cerebro humano automáticamente comienza a analizar y categorizar la información visual que recibe, sin un esfuerzo consciente. Este proceso hace que el contenido sea más fácil de recordar y recordar.

Además, las imágenes pueden hacer que su contenido sea más atractivo y atractivo para los visitantes al mejorar el atractivo visual de un sitio web. 

A continuación se presentan algunas razones por las que las imágenes son importantes para el contenido web:

• Capta la atención fácilmente: Las imágenes se pueden utilizar para captar la atención de un visitante y atraerlo hacia su contenido. Esto es especialmente importante para los sitios web que tienen como objetivo vender productos o servicios.
• Transmitir información rápidamente: A veces, una imagen puede comunicar información de forma más rápida y eficaz que el texto. Por ejemplo, una infografía puede transmitir información compleja de forma sencilla.
• Rompe la monotonía: Grandes bloques de texto pueden resultar tediosos y monótonos de leer. Las imágenes pueden ayudar a dividir el texto extenso y devolver la atención a su contenido.
• Deja una huella duradera en la memoria: El cerebro humano puede procesar información visual mucho más rápido que el texto o la información verbal y puede retenerla durante un período prolongado.
• Hace que su contenido sea más compartible: Las plataformas de redes sociales como Facebook e Instagram son muy visuales y, a menudo, las fotos se pueden compartir más que el texto solo. Al incluir imágenes de alta calidad en su sitio web, puede aumentar las probabilidades de que los visitantes compartan su contenido en las redes sociales.
• Conocimiento de la marca: Las imágenes pueden ayudar a mejorar su marca al presentar su logotipo u otros elementos visuales asociados con su marca.

Cómo agregar imágenes en WordPress (método básico)

La forma más básica de mostrar imágenes en WordPress es agregar una imagen a la biblioteca multimedia y mostrarla con estilos predeterminados.

Para agregar una imagen a la biblioteca multimedia de WordPress:

Inicie sesión en su WordPress, vaya a Medios > Agregar nuevoy seleccione la imagen de su computadora para cargarla en la biblioteca multimedia.

Ahora, mostrar imágenes en WordPress depende del editor predeterminado que esté utilizando.

Editor Gutenberg:

En el valor predeterminado de WordPress Gutenberg también conocido como editor de bloques, puede mostrar imágenes utilizando bloques de imágenes. Para eso, abra el editor y agregue el bloque de imagen en la posición deseada para mostrar la imagen. Luego cargue o seleccione una imagen de la biblioteca multimedia.

Editor clásico:

Si está utilizando un editor clásico antiguo, abra una página o publicación en el editor, luego coloque el cursor del mouse en la publicación/página donde desea mostrar la imagen. Después de eso, haga clic en el botón Agregar medios y seleccione una imagen de la biblioteca de medios.

Cómo mostrar imágenes en WordPress usando Elementor (métodos avanzados)

Ahora, si desea formas más avanzadas de mostrar imágenes, puede cambiar al creador de páginas Elementor. Con Elementor puedes utilizar los widgets de imágenes para mostrar imágenes de sitios web de forma creativa. 

Llevando las cosas al siguiente nivel, el complemento ElementsKit Elementor viene con un montón de widgets que pueden permitirle mostrar imágenes con estilo con las funciones más personalizables. ElementsKit viene con widgets como Elementor Image Box, Image Gallery, Image Swap, etc. Estos widgets le brindan diversas opciones para exhibir imágenes con estilo. 

A continuación se muestra una demostración de cómo puede utilizar esos widgets para mostrar imágenes en WordPress y hacer que su sitio sea más animado.

Instalar ElementsKit

Para utilizar las funciones avanzadas de imágenes, debe instalar los complementos ElementsKit Lite y ElementsKit Pro en su sitio de WordPress.

Aquí está la documentación para instalar los complementos de ElementsKit.

Después de instalar los complementos, puede continuar con los widgets para mostrar imágenes en WordPress.

Método 1: mostrar imágenes en un cuadro de imagen elegante

Con el widget de cuadro de imagen de ElementsKit, puede resaltar una sección con una combinación de imagen y texto. Te permite mostrar una imagen con texto como un título y una descripción. Estos estilos se utilizan a menudo para resaltar un producto, servicio o característica estrella.

Para usar la función: habilite el widget Cuadro de imagen desde ElementsKit > Widget

A continuación se explica cómo utilizar el widget ElementsKit Image Box para Elementor:

Imagen

En la sección de imágenes, puedes personalizar la imagen y su apariencia.

1. Elija imagen: Seleccione una imagen de la biblioteca multimedia o cargue una.
2. Tamaño de la imagen: Establece el tamaño de la imagen.
3. Área de contenido: Puede elegir el estilo del área de contenido entre las opciones dadas.
4. Igual altura: Habilite o deshabilite la altura igual para la imagen y el área de contenido.
5. Habilitar enlace: Puede utilizar la imagen como sección de anclaje habilitando el enlace. Cuando esté habilitado, agregue el enlace a la imagen.

Cuerpo

En la sección del cuerpo, puede agregar todo el texto al cuadro de imagen de Elementor. Esto incluye un encabezado, una descripción, una etiqueta HTML de título y una alineación del texto.

1. Título: Agregue el texto del encabezado en este campo.
2. Etiqueta HTML del título: Seleccione qué etiqueta HTML desea para el encabezado (H1, H2, H3, div, span, párrafo, etc.)
3. Descripción: En este campo agregue una breve descripción del contenido.
4. Alineación: Establezca la alineación del texto para la imagen, el encabezado, la descripción y el botón.

Botón

Tiene la opción de agregar un botón CTA en el cuadro de imagen de Elementor. Para eso,

1. Botón Habilitar: Para agregar un botón en el cuadro de imagen, habilite esta opción.
2. Etiqueta: Agregue una etiqueta de botón (texto) que indique el propósito de la CTA.
3. URL: Ingrese el enlace de la página a la que desea redirigir al visitante una vez que haga clic.
4. Agregar ícono: Si desea mostrar un icono con la etiqueta del botón, habilite esta función.
5. Icono: Elija un ícono de la biblioteca de íconos de Elementor.
6. Posición del icono: Seleccione si el icono estará antes o después del texto del botón.

A continuación, en la pestaña de estilo, puedes personalizar la apariencia del cuadro de imagen de Elementor, incluidos los colores, el fondo, la tipografía, etc.

En el Curvas clásicas sección, puede ajustar el ancho y el margen del área de contenido. Luego, aplique estilo a la imagen cambiando el relleno y la opacidad. 

Además, puede personalizar la apariencia del texto del encabezado y la descripción cambiando el color, la tipografía, el color de fondo, etc. Además, personalice los estilos de los botones y su ícono con sus atributos.

Mire el vídeo para obtener conocimientos más detallados sobre el widget ElementsKit Image Box.

Método 2: mostrar dos imágenes con animaciones de intercambio

El intercambio de imágenes es una forma elegante de mostrar dos imágenes alternativas en un solo lugar que se intercambian cuando los visitantes pasan el cursor sobre la imagen o hacen clic en ella. El widget ElementsKit Image Swap viene con un par de docenas de efectos sorprendentes que hacen que su sitio web sea aún más atractivo visualmente.

Puede utilizar esta función, como utilizar la primera imagen como imagen de portada que llame la atención y la segunda imagen para proporcionar la información necesaria.

Para usar la función: habilite el widget de intercambio de imágenes desde ElementsKit > Widget

A continuación se explica cómo utilizar el widget de intercambio de imágenes de ElementsKit para Elementor:

1. Imagen frontal: Esta es la imagen que aparece de forma predeterminada cuando la página se carga en el navegador web.
2. Imagen trasera: Esta es la imagen que aparece cuando se realiza la acción, es decir, un visitante pasa el cursor sobre la imagen o hace clic en ella.
3. Tamaño de la imagen: Establezca el tamaño de la imagen para ambas imágenes.
4. Estilo de intercambio: Tiene 21 efectos de intercambio diferentes disponibles con el widget ElementsKit Image Swap, que puede ayudarlo a hacer que su diseño web sea más atractivo para los visitantes.

5. Tigger: Aquí puede elegir entre la acción de pasar el cursor o hacer clic para activar el intercambio de imágenes.
6. Indicadores: Este funciona como un navegador, que indica qué imagen está en el programa y cuál es el fondo.
7. Enlace: Puede vincular las imágenes a una página si lo desea.

En la pestaña de estilo, puede ajustar la altura de la imagen y la duración de la animación de intercambio. Y si habilitas el indicador, puedes cambiar su posición y personalizar su tamaño y colores.

Método 3: dé formas únicas a las imágenes del sitio web con enmascaramiento de imágenes

Esta es una forma única de darle vida a su sitio web con imágenes de formas únicas. Las funciones de enmascaramiento de imágenes transforman las imágenes con formas tradicionales en otras más atractivas. En WordPress, el enmascaramiento es bastante fácil con Elementor.

ElementsKit para Elementor viene con un módulo de enmascaramiento para imágenes. El módulo está disponible para cualquier elemento en Elementor que involucre una imagen. En el editor de Elementor, habilitar el enmascaramiento de ElementsKit y seleccione una forma de las precargadas. También puedes agregar una forma personalizada a las imágenes.

Método 4: mostrar imágenes en una galería

Elementor viene con una excelente manera de mostrar múltiples imágenes en una galería elegante. El widget Galería básica de Elemntor funciona con un enfoque tradicional en el que puedes agregar imágenes, establecer el tamaño de la imagen y personalizar aspectos básicos como el espaciado y los bordes de la imagen.

Sin embargo, el widget de la Galería de imágenes de ElementsKit viene con opciones más flexibles. Con el widget, puede personalizar el diseño con descripciones, agregar filtros en la galería e individualmente cada aspecto de la miniatura, la imagen y los filtros.

Obtenga más información sobre el widget Galería de imágenes y cómo puede mejorar el diseño de su sitio web en nuestro blog.

Envolver

En general, Elementor viene con varias formas de mostrar imágenes en WordPress. Para aprovechar al máximo las capacidades de Elementor, ElementsKit puede ser una gran adición.

ElementsKit tiene diversas formas y estilos: Cuadro de imagen para mostrar una imagen con encabezado y descripción; Intercambio de imágenes para mostrar dos imágenes alternativamente; Además, hay widgets de Galería de imágenes y Máscara de imágenes para brindarle más opciones.

Cada uno de estos elementos ofrece características únicas y opciones de personalización, lo que le permite crear contenido atractivo y visualmente atractivo para su sitio web.

Si esto le resulta útil, hay más para usted con ElementsKit. Este Complementos de Elementor viene con docenas de elementos más que pueden ayudarte a crear y diseñar un sitio web con la mayor cantidad de características y opcionales.