Cómo agregar un cuadro de imagen en WordPress: 3 sencillos pasos 

¿Quiere que sus páginas de WordPress destaquen visualmente? Entonces, los cuadros de imágenes son el elemento secreto.

Puede mostrar productos, resaltar a los miembros del equipo o llamar la atención de sus clientes sobre características clave con el cuadro de imagen en WordPress. 

¡Y lo has adivinado bien!

En este artículo, describiremos el Guía de 3 pasos sobre cómo agregar un cuadro de imagen en WordPress.

¡Vamos a empezar!

¿Qué es un cuadro de imagen en WordPress? 

Un cuadro de imagen es un elemento gráfico o contenedor diseñado para mostrar imágenes dentro de una página web o publicación. Puedes combinar texto y enlaces with photos to present information in an engaging and visually appealing way.

Why Display Image Box in WordPress?

Image box is helpful to enhance a WordPress website’s overall design and user experience. It also has significant impact on positively driving websites traffic with visual representations. Besides, it allows you to convey brand messages more efficiently to your customers.

Further, image box lets you add the following sections in your web pages to establish brand identity more strongly:

• Destacar características o servicios clave
• Presentación de publicaciones de blog o portafolios
• Mostrando imágenes y galerías de productos
• Mostrando a los miembros del equipo 
• Displaying testimonials and so on

Componentes clave del cuadro de imagen de WordPress

• Imagen: El elemento visual principal, que a menudo muestra un producto, servicio, miembro del equipo o concepto relacionado.
• Título: Un título breve y descriptivo que captura la esencia de la imagen y el texto que la acompaña.
• Texto: Una breve descripción o fragmento de información para proporcionar contexto y detalles.
• Botón/Enlace: Un botón o enlace en el que se puede hacer clic para dirigir a los usuarios a una página, producto u otros recursos relevantes.

Cómo agregar un cuadro de imagen en WordPress: guía de 3 pasos 

Los cuadros de imágenes pueden transformar sus páginas de WordPress en obras maestras visualmente impresionantes. También cautiva a tu audiencia y deja una impresión duradera.

Veamos cómo crear un cuadro de imagen en WordPress en solo 3 sencillos pasos:

Paso 1: instale y active los complementos necesarios

Para agregar un cuadro de imagen a su sitio de WordPress, puede usar código líquido o complementos de Elementor. En ese caso, usar complementos es una forma conveniente de crear y agregar cuadros de imágenes sin siquiera tener conocimientos de codificación. 

Por lo tanto, puedes optar por un Complemento Elementor todo en uno: ElementsKit. This amazing WordPress image box plugin offers extensive features and ready templates to add images to your WordPress website. Plus, the image box design and all the elements of the ElementsKit image box are fully customizable.

Para instalar el complemento del cuadro de imágenes ElementsKit, vaya a su panel de WordPress.

• Navegar a Complementos ➡ Agregar nuevo 
• Buscar “Kit de elementos” 
• Haga clic en "Instalar ahora"
• O descargue y cargue el archivo zip
• Active el complemento una vez que esté instalado.

Paso 2: agregue un cuadro de imagen a su sitio de WordPress

Después de instalar y activar el complemento del cuadro de imágenes de WordPress, es decir, ElementsKit, puede utilizar su Plantillas prediseñadas. Estas plantillas son fáciles de usar con solo un clic. Además, puede agregar o eliminar elementos según sus requisitos. 

Veamos cómo agregar imágenes en wordpress usando el Cuadro de imagen de ElementsKit: 

• Crear una nueva página/publicación o abrir una existente 
• Abrir con Elementor 
• Clickea en el Icono “Kit de elementos” 

• Next, you need to select the Elementor image box widget from the Categoría de widgets de ElementsKit 
• Haga clic en “Cuadro de imagen”

• Aquí puedes acceder 11 gratuitos y 8 de diseño premium variaciones; un total de 19 plantillas diferentes para agregar un cuadro de imagen al sitio de WordPress
• Puedes ver el vistas previas de todas las plantillas Para comprender el diseño y los elementos que combinan con su sitio web.
• Clickea en el signo más (+) para ver la vista previa en vivo 

• Después de finalizar el diseño, haga clic en "Insertar" to add WordPress image
• Se agregará a su página/publicación. 
• Ahora usted puede agregar/eliminar o modificar el contenido, estilos y otras propiedades del cuadro de imagen
• Después de toda la personalización, haga clic en "Publicar". And the image box will be live on your WordPress website

Paso 3: personaliza los estilos y la configuración 

ElementsKit, un excelente complemento para Elementor es un complemento totalmente personalizable ya que los usuarios pueden utilizar su Más de 85 widgets y módulos. Al igual que otros elementos, el widget del cuadro de imagen también se personaliza según sus necesidades. 

Puede editar los titulares y el contenido del cuerpo. Nuevamente, puedes cambiar los estilos de las imágenes y los botones de llamado a la acción. Además, puedes darle estilo a los cuadros de imágenes con numerosos efectos y formatos.

Veamos cómo personalizar un cuadro de imagen en WordPress: 

Personalización del diseño

Después de insertar las plantillas de cuadros de imágenes prediseñadas de ElementsKit en WordPress, puede ajustar su diseño. 

• Aumentar o disminuir el ancho del cuadro de imagen.
• Establecer el espacio entre columnas como estrecho, extendido, ancho, personalizado o sin espacio
• Adjust the image box height and alignment to correctly insert WordPress image
• Mantenga el desbordamiento predeterminado u oculto 
• Utilice etiquetas HTML, por ejemplo, encabezado, pie de página, principal, artículo, etc.

Personalización de contenido

El cuadro Imagen en WordPress contiene contenido diferente para diferentes elementos como títulos, imágenes, botones, etc. Puede cambiar el texto y modificar sus propiedades.

Veamos cómo personalizar el contenido del cuadro de imágenes de ElementsKit en WordPress. 

✨ Título 

• Cambiar títulos de títulos y subtítulos 
• Insertar enlaces con el título.
• Ocultar/mostrar borde con posición inicial/final 
• Agregar/mostrar u ocultar la descripción del título 
• Añade separadores con varios estilos y posiciones. 

✨ Imagen 

• Cambiar la imagen o agregar imágenes generadas por IA
• Ajuste el tamaño de la imagen, por ejemplo, completa, mediana, grande, personalizada, etc.
• Establezca el área de contenido como una línea de sombra simple, clásica, etc.
• Activar/desactivar igual altura 
• Insertar URL para vincular otro recurso 

✨Cuerpo 

• Agregar/eliminar o editar el texto del título
• Modificar la etiqueta HTML del título
• Ajustar la alineación del título a izquierda, derecha o centro 

✨ Botón

• Activar o desactivar la botón creativo
• Agregar texto de etiqueta de botón personalizado 
• Agregar URL personalizada
• Agregar/eliminar el ícono y configurar el pistón 

Personalización de estilo 

Con el diseño y el contenido, también puedes cambiar sus estilos. Como resultado, puede crear diferentes tipos de cuadros de imágenes que se adapten a la interfaz de usuario de su sitio de WordPress y otras propiedades. 

✨ Línea de sombra 

• Elija la línea de sombra para izquierda o derecha
• Establezca un ancho personalizado según la necesidad
• Personaliza el tipo y el color del fondo de la sombra. 
• Establecer imagen de fondo personalizada 

✨ Imagen 

• Agregar radio de borde personalizado y relleno 
• Ajuste la opacidad de la imagen para normal o efecto de desplazamiento 

✨Cuerpo 

• Elija el tipo de borde con radio de borde
• Establecer imagen de fondo, tipo y color personalizados 
• Ajustar el relleno del cuadro y el color de la sombra del cuadro 
• Ajustar la tipografía, el color y el espaciado del título.

✨ Botón 

• Personalice el valor de relleno y el tamaño de fuente del icono 
• Cambiar el texto del botón y el color de fondo 
• Establecer propiedades normales o flotantes 
• Establecer tipo de borde, radio de borde y sombra de cuadro 

Personalización avanzada 

El cuadro de imagen de ElementsKit es flexible para utilizar funciones de personalización avanzadas. Ayuda a que su cuadro de imagen sea más elegante y atractivo. También puedes integrar varios efectos de movimiento y códigos personalizados para hacer coincidir el cuadro de imagen con la página web particular de su sitio web.

Encontrarás las opciones de personalización en la configuración avanzada:

• Modifique el relleno, el margen, el ancho, la posición y el índice z del diseño del cuadro de imagen
• Agregue efectos de movimiento para los elementos (por ejemplo, aparecer, desaparecer, rebotar, acercar hacia arriba, deslizarse hacia la izquierda, etc.)
• Personalice la capacidad de respuesta del cuadro de imagen según dispositivos como PC, pestañas y dispositivos móviles 
• Establecer atributos y propiedades para ocultar/mostrar en varios dispositivos 
• Incluir CSS personalizado para modificación de características adicionales 

Ventajas de agregar un cuadro de imagen en WordPress

• Mejore el atractivo visual: Un cuadro de imagen atractivo divide el contenido con mucho texto. Además, hace que las páginas sean más atractivas visualmente y más fáciles de escanear.
• Resalte la información principal: Puede resaltar mensajes, funciones o llamados a la acción importantes.
• Mejorar la participación del usuario: Al utilizar elementos de cuadro de imagen en WordPress, también puede crear experiencias visualmente atractivas. Puede mantener a los usuarios interesados y explorando su contenido.
• Aumente las tasas de clics: Los cuadros de imágenes con llamadas a la acción (CTA) claras pueden alentar a los usuarios a hacer clic y obtener más información.
• Información de la estructura: Puede organizar el contenido en secciones lógicas y mejorar la legibilidad con la navegación.

5 consejos para agregar un cuadro de imagen en WordPress 

Agregar un cuadro de imagen a su sitio web de WordPress hace que su contenido sea más atractivo e informativo. 

Vamos a explorar 5 consejos para hacerlo más eficiente y llamativo elemento en su sitio:

1. Optimice el tamaño de las imágenes

Utilice herramientas como PequeñoPNG o complementos de optimización de imágenes para reducir el tamaño de los archivos de imágenes sin comprometer la calidad. Esto mejora significativamente la velocidad de carga de la página.

2. Mantenga la coherencia

Utilice imágenes con un estilo, paleta de colores y proporciones consistentes para crear una experiencia visual coherente. Además, asegúrese de que los cuadros de imagen se alineen con otros elementos de la página para una apariencia elegante.

3. Utilice texto alternativo descriptivo

Proporcione texto alternativo descriptivo para cada imagen. Esto ayuda a los lectores de pantalla a describir imágenes para usuarios con discapacidad visual y mejora la visibilidad en los motores de búsqueda.

4. Considere la capacidad de respuesta móvil

Verifique que los cuadros de imágenes se muestren correctamente en varios tamaños de pantalla, especialmente en dispositivos móviles. Utilice complementos o técnicas de diseño responsivo para garantizar una adaptación perfecta.

5. Vincular estratégicamente (si corresponde)

Vincule cuadros de imágenes a contenido relevante o páginas de destino para guiar a los usuarios y fomentar las acciones deseadas.

Es bueno saberlo 👉 Cómo aplicar el enmascaramiento de imágenes de Elementor en 4 sencillos pasos con ElementsKit

Preguntas frecuentes

Envuélvelo

Para decorar sus sitios web de WordPress con imágenes, nada puede ser más cautivador e informativo que el cuadro de imágenes de ElementsKit.

Aquí le proporcionamos una guía paso a paso sobre cómo agregue un cuadro de imagen a su sitio de WordPress sin esfuerzo. Además, hemos mostrado cómo utilizar el Complemento ElementsKit Elementor para obtener más impacto y experimentar con diferentes estilos y diseños de cuadros de imágenes. 

Entonces, el poder de las imágenes está a tu alcance ahora: ¡úsalo de manera eficiente y haz que tu contenido realmente brille! 🥳