Tutoriales de WordPress de Confianza, cuando más los necesitas.
Guía para Principiantes de WordPress
Copa WPB
30 Millones+
Sitios web que usan nuestros plugins
20+
Años de experiencia en WordPress
3000+
Tutoriales de WordPress de expertos

Cómo agregar una imagen en un widget de barra lateral de WordPress

Cuando lanzamos WPBeginner, rápidamente vimos lo valioso que podía ser la barra lateral para conectar con nuestros visitantes.

Empezamos a usar imágenes en nuestra barra lateral para hacerla más atractiva visualmente, y los resultados fueron impresionantes.

Las imágenes nos ayudaron a promocionar nuestros cursos gratuitos, destacar ofertas de cupones, mostrar artículos populares y guiar a los lectores a diferentes tipos de artículos y kits de herramientas.

Con solo unos pocos toques visuales, la barra lateral se convirtió en una de las partes más efectivas de nuestro sitio para generar interacción y clics.

En esta guía, te mostraremos cómo agregar una imagen en un widget de barra lateral de WordPress, sin importar el tema que estés usando o tu experiencia técnica.

Cómo agregar una imagen en un widget de barra lateral de WordPress

💡 Resumen: Para agregar una imagen a tu barra lateral de WordPress, ve a Apariencia » Widgets en tu panel de WordPress y abre tu área de widget de barra lateral.

Luego, haz clic en el botón ‘+’ para agregar un nuevo bloque, selecciona el bloque ‘Imagen’ y sube la imagen que deseas mostrar. Una vez que estés satisfecho con cómo se ve, haz clic en ‘Actualizar’ para guardar tus cambios.

¿Por qué agregar imágenes a tu barra lateral de WordPress?

Agregar imágenes a tu barra lateral de WordPress puede ayudar a atraer la atención a contenido importante, promociones y llamadas a la acción que los visitantes podrían pasar por alto.

Por ejemplo, puedes usar imágenes en la barra lateral para promocionar un curso gratuito, destacar una oferta especial, mostrar contenido popular o dirigir a los usuarios a páginas importantes de tu sitio web.

Aquí hay algunos beneficios de agregar imágenes a tu barra lateral:

  • Mejores tasas de clics: Las imágenes de banner para promociones, lead magnets y ofertas especiales a menudo atraen más clics que los enlaces de texto estándar.
  • Descubrimiento de contenido más rápido: Las miniaturas de imágenes pueden ayudar a los visitantes a encontrar rápidamente artículos, recursos o herramientas populares que coincidan con sus intereses.
  • Tasas de rebote más bajas: Una barra lateral bien diseñada ofrece a los lectores señales visuales claras sobre a dónde ir a continuación, animándolos a explorar más de tu sitio web.

En WPBeginner, hemos descubierto que las imágenes de la barra lateral que promocionan nuestros cursos gratuitos y kits de herramientas generan clics de manera constante y ayudan a los visitantes a descubrir más de nuestro contenido.

Opción 1: Usando el bloque de widget de imagen de WordPress

Nota: Este tutorial se aplica a los Temas Clásicos que utilizan la pantalla estándar Apariencia » Widgets.

Si estás utilizando un Tema de Bloques con Edición Completa del Sitio (FSE), como Twenty Twenty-Four o Twenty Twenty-Five, deberás ir a Apariencia » Editor » Partes de Plantilla » Barra Lateral en su lugar.

Desde allí, haz clic en el botón Signo más (+) para agregar un bloque de Imagen directamente en la parte de tu plantilla de barra lateral, luego haz clic en ‘Guardar’ para aplicar tus cambios en todo el sitio.

Puedes usar el bloque de Imagen predeterminado para agregar fotos a la barra lateral de tu sitio.

El área de widgets ahora utiliza el mismo editor basado en bloques que se encuentra en las publicaciones y páginas. Puedes usar bloques para agregar formularios, publicaciones relacionadas, imágenes y otros elementos fácilmente.

Para empezar, deberás visitar la página Apariencia » Widgets desde tu panel de WordPress. Después de eso, simplemente haz clic en el botón '+' y agrega un bloque de imagen.

Agregar un bloque de widgets de imagen

A continuación, puedes agregar una imagen en el bloque de widget de 3 maneras.

Por ejemplo, puedes subir una imagen, elegir una imagen existente de tu biblioteca de medios de WordPress o insertar la imagen desde una URL.

Subir imagen en bloque de widget

En la configuración del bloque, verás opciones para cambiar el estilo y el tamaño de la imagen.

También deberías agregar texto alternativo aquí. Ayuda a los lectores de pantalla a comprender el contenido de la imagen y es una práctica recomendada importante para el SEO de imágenes de WordPress.

Para obtener mejores resultados, asegúrate también de que tu imagen esté comprimida y guardada en un formato moderno como WebP para mejorar la velocidad de la página y las puntuaciones de Core Web Vitals. WordPress admite la carga diferida para imágenes de barra lateral de forma predeterminada, lo que ayuda a reducir el tiempo de carga inicial de la página.

Consejo profesional: Para obtener mejores resultados, usa una imagen de 300px de ancho, el ancho estándar de la barra lateral para la mayoría de los temas.

Si tu imagen aparece estirada o demasiado grande, ajusta el tamaño de la imagen a "Mediano" en el panel de configuración del bloque, o agrega max-width: 100%; en Apariencia » Personalizar » CSS adicional para mantenerla dentro del área de la barra lateral.

Cuando hayas terminado, no olvides hacer clic en el botón 'Actualizar'.

Editar la configuración del bloque de widget de imagen

Cuando hayas terminado, no olvides hacer clic en el botón 'Actualizar'.

A continuación, puedes visitar tu sitio web y ver la imagen en la barra lateral.

Ver imagen en la barra lateral
Agregar una imagen en la barra lateral en un tema de bloques (Edición completa del sitio)

Si estás utilizando un tema de bloques como Twenty Twenty-Four o Twenty Twenty-Five, la pantalla de Widgets no está disponible.

En su lugar, ve a Apariencia » Editor, haz clic en la parte de la plantilla de tu barra lateral, presiona el botón (+) y agrega directamente un bloque de Imagen.

Agregar bloque de imagen en la barra lateral de FSE

Haz clic en ‘Guardar’ cuando termines para aplicar el cambio en todo tu sitio. Para más información, puedes consultar nuestra guía sobre edición de sitio completo.

🔎 ¿Quieres hacer tus imágenes más interactivas? ¡Prueba agregando puntos interactivos a tus imágenes para resaltar características específicas de tus visuales!

Opción 2: Usando un plugin de widget de imagen

El plugin Image Widget es ideal para usuarios que administran sitios para clientes o que cambian frecuentemente entre instalaciones de WordPress antiguas y nuevas. Proporciona una interfaz basada en formularios consistente que funciona de la misma manera independientemente de la versión de tu editor.

Primero, necesitas instalar y activar el plugin Image Widget. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado, simplemente ve a la página Apariencia » Widgets y agrega el bloque ‘Image Widget’.

Agregar bloque de widget de imagen

A continuación, haz clic en el botón ‘Seleccionar Imagen’ para subir una imagen o seleccionar una de la biblioteca de medios.

Después de eso, necesitas hacer clic en el botón ‘Insertar en Widget’, y verás la vista previa de la imagen en la configuración del widget.

Seleccionar una imagen de la biblioteca

Puedes agregar un título o texto alternativo, así como un enlace y un título para la imagen.

También puedes elegir un tamaño de imagen de la lista de opciones disponibles, editar la alineación y más.

Agregar título y texto alternativo

Una vez que estés satisfecho, simplemente haz clic en el botón Actualizar para guardar el widget de imagen. Eso es todo. Ahora puedes ir a tu sitio web y ver la imagen mostrada en tu barra lateral.

Si deseas mostrar varias imágenes, puedes usar el widget de Galería en lugar del widget de Imagen.

De nuevo, simplemente ve a la página Apariencia » Widgets y luego haz clic en la opción ‘Galería’.

Elegir el widget de Galería

Desde aquí, puedes personalizar las imágenes de tu galería. Por ejemplo, puedes hacer que las esquinas de las imágenes sean redondeadas.

Una vez que estés contento con cómo se ve la galería, simplemente haz clic en ‘Actualizar’.

Personalizar el widget de Galería

Si deseas más opciones de personalización, te recomendamos usar un plugin de galería de imágenes como Envira Gallery.

Ofrece capacidad de respuesta móvil, funcionalidad de lightbox y velocidad optimizada de la que carece el widget predeterminado. También puedes agregar una marca de agua a tus imágenes para proteger tu trabajo (disponible en el plan Plus y superior).

Para más información, consulta nuestra guía sobre cómo crear una galería de imágenes responsiva en WordPress.

Una vez que tengas el plugin instalado y hayas configurado algunas galerías, verás el widget 'Envira Gallery' en tu editor de widgets basado en bloques.

Agregar el widget de Envira Gallery

Todo lo que necesitas hacer a continuación es elegir la galería que deseas mostrar.

Haz clic en el menú desplegable para hacerlo.

Elegir una galería para mostrar con el widget de Envira Gallery

Una vez hecho esto, puedes personalizar aún más la galería. Por ejemplo, puedes cambiar la disposición de las columnas y habilitar el modo lightbox cuando se hace clic en una imagen.

Cuando estés satisfecho, simplemente haz clic en 'Actualizar'.

Personalizar el widget de Envira Gallery

Opción 4: Agregando una imagen en el área de widget clásico

Si has instalado un plugin como Classic Widgets que restaura la interfaz de widgets antigua, también puedes agregar una imagen a la barra lateral usando el widget heredado.

Nota: Recomendamos encarecidamente mantener WordPress actualizado a la última versión. La interfaz de widgets clásica se eliminó del núcleo de WordPress en la versión 5.8, por lo que este método requiere que el plugin Classic Widgets esté activo.

Simplemente ve a la página Apariencia » Widgets desde tu panel de administración de WordPress y agrega el widget 'Imagen' a tu barra lateral. Si no has usado widgets antes, consulta nuestra guía sobre cómo agregar y usar widgets en WordPress.

Agregar widget de imagen

El widget se expandirá y podrás ver su configuración.

La primera opción es agregar un título al widget de imagen. Después de eso, haz clic en el botón 'Agregar imagen' para continuar.

Esto abrirá el cargador de medios de WordPress, donde puedes hacer clic en el botón 'Subir archivos' para subir tu imagen o seleccionar una imagen que hayas subido previamente.

Configuración de imagen

Después de subir la imagen, verás la configuración de la imagen en la columna derecha. Desde aquí, puedes proporcionar un título o texto alternativo para la imagen, agregar una descripción, seleccionar un tamaño o incluso agregar un enlace.

Una vez que hayas terminado, puedes hacer clic en el botón ‘Agregar al Widget’ para guardar tus cambios. Ahora verás una vista previa de la imagen dentro del área de configuración del widget.

Vista previa del widget

No olvides hacer clic en el botón ‘Guardar’ para guardar tu widget de imagen.

Ahora puedes visitar tu sitio web para ver la imagen mostrada en la barra lateral de tu blog de WordPress.

Vista previa de la imagen de la barra lateral

Opción 5: Usando el bloque de widget de HTML personalizado

En algunos casos, es posible que necesites agregar clases de seguimiento específicas o atributos avanzados que el bloque de imagen estándar no soporta. En ese caso, necesitarás agregar manualmente una imagen a la barra lateral de tu blog.

Primero, sube la imagen a tu sitio de WordPress a través de Medios » Agregar nuevo.

Después de subir la imagen, debes hacer clic en el enlace Editar junto a la imagen.

Editar imagen subida

WordPress te llevará a la página ‘Editar medios’, donde verás la URL del archivo de imagen en el lado derecho de la pantalla.

Debes copiar esta URL y pegarla en un editor de texto como el Bloc de notas.

Copiar URL del archivo de imagen

A continuación, debes ir a la pantalla de Apariencia » Widgets desde tu panel de WordPress.

Después de eso, puedes agregar el bloque de widget ‘HTML personalizado’ a tu barra lateral donde quieras mostrar la imagen.

Agregar bloque de widget HTML personalizado

En el área de cuadro de texto del widget, debes agregar tu imagen usando este código:

<img src="Paste The File URL Here" alt="Strawberries" />

La etiqueta img se usa en HTML para mostrar imágenes. Necesita dos atributos. El primero es src, que define la ubicación del archivo de imagen. Aquí es donde pegarás la URL que copiaste anteriormente.

El segundo es alt, que se usa para proporcionar un texto alternativo para la imagen. Tu etiqueta de imagen final se verá algo así:

<img src="https://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />

Debes hacer clic en el botón ‘Actualizar’ para guardar la configuración de tu widget y luego previsualizar tu sitio web.

Preguntas frecuentes sobre imágenes y barras laterales en WordPress

Aquí hay algunas preguntas que nuestros lectores han hecho con frecuencia sobre cómo agregar imágenes y personalizar sus barras laterales en WordPress:

¿Cómo agrego imágenes una al lado de la otra en WordPress?

Puedes agregar imágenes una al lado de la otra usando el bloque de Galería predeterminado. Simplemente agrega el bloque a tu contenido, selecciona varias fotos de tu biblioteca de medios y WordPress las organizará automáticamente en un diseño de cuadrícula una junto a la otra.

Para más información, consulta nuestro tutorial sobre cómo poner imágenes una al lado de la otra fácilmente en WordPress.

¿Cómo edito los widgets de la barra lateral en WordPress?

Para editar los widgets de la barra lateral, navega a Apariencia » Widgets en tu panel de WordPress. Desde allí, puedes hacer clic en cualquier bloque existente para cambiar su configuración, moverlo o eliminarlo por completo usando el editor visual.

¿Cómo agrego una imagen a la barra de menú en WordPress?

La forma más fácil de agregar imágenes a tu menú es usando un plugin como Menu Image. Una vez instalado, ve a Apariencia » Menús, donde verás un nuevo botón para subir un ícono o foto para cada elemento del menú.

Para empezar, puedes consultar nuestra guía sobre cómo agregar íconos de imagen al menú de navegación de WordPress.

¿Cómo diseñar una barra lateral en WordPress?

Puedes diseñar una barra lateral personalizada usando un constructor de páginas de arrastrar y soltar como SeedProd para crear diseños sin codificación. Alternativamente, puedes usar el editor de bloques en Apariencia » Widgets para agrupar bloques, agregar colores de fondo y estilizar encabezados visualmente.

¿Se puede personalizar un widget?

Sí, la mayoría de los widgets modernos de WordPress son bloques que se pueden personalizar completamente. Simplemente haz clic en el widget en el editor y usa el panel de configuración de la derecha para ajustar colores, tipografía, alineación y opciones de visibilidad.

Esperamos que este artículo te haya ayudado a agregar una imagen al widget de la barra lateral de WordPress. También te puede interesar consultar nuestras selecciones expertas de los mejores constructores de páginas de arrastrar y soltar en WordPress y cómo cambiar el lado de la barra lateral en WordPress.

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Divulgación: Nuestro contenido es compatible con el lector. Esto significa que si haces clic en algunos de nuestros enlaces, podemos ganar una comisión. Consulta cómo se financia WPBeginner, por qué es importante y cómo puedes apoyarnos. Aquí está nuestro proceso editorial.

El Kit de herramientas definitivo para WordPress

Obtén acceso GRATUITO a nuestro kit de herramientas: ¡una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Interacciones del lector

50 ComentariosDeja una respuesta

  1. Hola,

    Acabo de enviar una pregunta sobre que mi imagen solo aparece en la página de inicio y no en otras páginas del sitio. Resolví mi problema y quería compartir la solución en caso de que ayude a alguien más. Estaba intentando usar el widget de HTML personalizado para MOSTRAR un par de imágenes en mi barra lateral de contenido y cuando configuré específicamente la adición de las páginas en las que quería que se mostraran (dejando "Coincidir todo" DESMARCADO), las imágenes solo aparecieron en la página de inicio.

    La solución fue invertirlo y decirle al widget que OCULTE si la página era 404 (o lo que quieras). Ahora las imágenes aparecen en la barra lateral de todas mis páginas. :-)

    Gracias,
    Holly

  2. Hola,

    Logré que el widget de HTML personalizado funcionara en la página de inicio, pero las imágenes no aparecen en las otras páginas estáticas. ConfigurÉ los ajustes para "Mostrar si" mis páginas deseadas están seleccionadas, pero la imagen solo aparece en la página de inicio. He intentado eliminar y volver a agregar el widget, y eliminar y volver a agregar páginas. ¿Alguna idea?

    ¡Gracias!
    Holly

    • Dependiendo de tu tema, el área de widgets en la que lo estás colocando solo puede mostrarse en tu página de inicio. Deberías consultar con el soporte del tema para saber dónde deberían mostrarse esos widgets :)

      Administrador

  3. Hola, estoy intentando agregar la imagen y que aparezca en la esquina superior izquierda de la publicación. Cuando la agrego y previsualizo, todo está ahí, pero cuando publico, no está. ¿Alguna idea?

  4. He agregado una imagen a mi pie de página y en Chrome en una computadora de escritorio aparece y luego desaparece inmediatamente. He reducido el tamaño, he intentado agregarla como una imagen en html, pero nada resuelve el problema. En Chrome en mi móvil está bien. No tengo adblock en mi computadora de escritorio. El problema también ocurre con Firefox, pero en Microsoft Edge todo funciona bien. ¿Alguna idea?

  5. hola, he creado un blog en wordpress pero el idioma del contenido de las publicaciones es telugu. ¿cómo cambio el estilo de fuente de la publicación en telugu?

  6. Hola,

    He intentado ambos métodos listados en este video, y aún así la imagen de la barra lateral no aparece en absoluto.

    ¿Alguna idea de cómo podría solucionar esto?

    ¡Gracias!

  7. Gracias por estar siempre al tanto de las búsquedas aleatorias que hago sobre cosas de WordPress, ¡y gracias por la información útil adecuada para la gente común que usa WP!

  8. Gracias por escribir sobre esto en detalle. Quiero poner mis anuncios en la sección de widgets. Este método se adaptará perfectamente a mi necesidad. Pero solo tengo un problema. ¿Cómo agregar una imagen diferente para cada publicación de blog? ¿Hay alguna forma de hacerlo?

  9. Me encanta este tutorial, sin embargo, soy escéptico de descargar el widget de imágenes porque dice que no ha sido probado con mi versión de WordPress. ¿Habrá actualizaciones pronto o cómo se prueba con mi versión de WordPress?

  10. Hola, espero no haberlo pasado por alto en algún comentario, pero ¿cómo se pone una imagen circular u ovalada en lugar de cuadrada para el "acerca de mí" en la barra lateral? Estoy usando Divi de Elegant Themes.

  11. Hola,

    ¿Alguna idea de por qué los puntos de viñeta no aparecen en los widgets de la barra lateral a pesar de haber quitado "list-style-type: none" del archivo CSS y haberlo reemplazado con el siguiente código y aún así no funciona:

    .widget ul li { list-style: circle }

  12. ¡Wow! Justo lo que necesitaba. El texto visual es demasiado trabajo para una simple imagen. He estado buscando un plugin que haga exactamente esto. ¡Muchas gracias!

  13. Hola,
    Tengo un par de preguntas. Primero, tengo problemas para instalar el plugin Widget Image por alguna razón. He instalado plugins antes, pero no parece que pueda hacer este. Es cierto, soy principiante y los instalé hace casi un año, así que tal vez olvidé algo. ¿Me puedes dar algún consejo?

    Además, lo creas o no, ¡logré poner una imagen en mi widget usando el código HTML! (Sorprendido de que pudiera codificar, pero lo hiciste muy fácil y comprensible) El único problema que tengo es que es de tamaño completo y espero tener miniaturas. ¿Hay código para eso? Si es así, no necesito instalar el plugin.
    ¡Gracias!

  14. Leí esto para intentar actualizar la imagen que tengo en un widget en mi blog.

    ¿Están en el mismo planeta que el resto de nosotros? Échenle un vistazo a lo que escribieron; tendrían que ser un abogado de Filadelfia mezclado con Steve Jobs para entender las instrucciones.

    De todos modos, volviendo a intentar cambiar la imagen, estoy seguro de que el truco está ahí en alguna parte.

  15. Muchas gracias por esta información. Pero realmente necesito saber cómo mostrar anuncios de Google en mis publicaciones y en la barra lateral también. Ya tengo una cuenta de AdSense aprobada y he generado el código del anuncio. Pero el siguiente paso es lo que no entiendo. Necesito ayuda, por favor.

  16. O he pasado por alto muchas cosas de las que has hablado o el sitio ha cambiado. Veo una opción para un widget de imagen que dices que no existe. No veo ningún medio o galería donde pueda subir un archivo de imagen.

    Entonces, ¿dónde subo el archivo para poder obtener una URL para ponerla en el lugar necesario en el formulario para configurar el widget de imagen?

  17. Hola. Sé cómo poner las imágenes en la barra lateral, pero ocupan demasiado espacio, así que estoy intentando hacer una galería de clics aquí. Obtengo la pequeña caja de clics, pero no se muestran imágenes. También pude hacer una presentación automática, pero es muy distractora, así que no la quiero. Solo quiero la galería de fotos donde haces clic para pasar a la siguiente imagen, pero no encuentro nada sobre cómo solucionar esto aquí.

  18. Hola,

    Tengo un problema al agregar widgets de imagen. Cuando intento agregar uno nuevo (después de haber eliminado uno también), los cambios no se guardan, la página deja de cargar y cuando intento acceder al sitio (administrador y normal) dice que no se puede conectar al servidor, ¡así que básicamente mi sitio está caído. Reinicié mi computadora e instalé actualizaciones y esto lo resolvió la primera vez, pero cuando intenté agregar el widget nuevamente sucedió lo mismo, ¡excepto que reiniciar ya no parece ayudar!

    ¡Por favor, ayúdame! ¡Realmente lo agradecería!

    ¡Gracias de antemano!

  19. Hola, gracias por eso, funciona de maravilla. Tengo una pregunta; no quiero que la misma imagen aparezca en todas las páginas, así que ¿cómo la restringo a una página en particular para poder usar una imagen diferente en páginas subsiguientes?

    Saludos,

    Gregor

  20. Gracias, el video es útil pero pasas por el diálogo tan rápido que tuve que pausar, rebobinar, pausar, pausar, repetir... muchas veces. Por favor, ten en cuenta que algunos de nosotros somos principiantes ABSOLUTOS en WordPress. Gracias por el gran material... pero más lento sería más útil. :-)

  21. Tengo la imagen en el widget – lo que quiero saber es cómo dirigir ese widget a un formulario de suscripción – cómo se agrega ese código

Deja una respuesta

Gracias por elegir dejar un comentario. Ten en cuenta que todos los comentarios se moderan de acuerdo con nuestra política de comentarios, y tu dirección de correo electrónico NO se publicará. Por favor, NO uses palabras clave en el campo del nombre. Tengamos una conversación personal y significativa.