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 fácilmente imágenes a los widgets de la barra lateral en tu sitio de WordPress, sin importar el tema que estés usando o tu experiencia técnica.
💡Respuesta Rápida: Cómo agregar una imagen a la barra lateral de WordPress
Para la mayoría de los usuarios, la forma más rápida de agregar una imagen a la barra lateral es usando el bloque predeterminado de WordPress:
- Ve a Apariencia » Widgets en tu panel.
- Localiza tu área de barra lateral y haz clic en el botón Agregar bloque (+).
- Busca y selecciona el bloque Imagen.
- Sube tu foto y haz clic en Actualizar para guardar los cambios.
¿Por qué agregar imágenes a tu barra lateral de WordPress?
Agregar imágenes a tu barra lateral de WordPress puede mejorar significativamente el atractivo visual y la funcionalidad de tu sitio web.
Las imágenes captan la atención más rápido que el texto plano. Esto te ayuda a resaltar guías importantes, promociones o recursos de manera efectiva.
Una barra lateral bien diseñada también mejora la experiencia del usuario. Esto puede resultar en visitas más largas al sitio y tasas de rebote reducidas.
Dicho esto, veamos cómo agregar fácilmente imágenes a tu barra lateral de WordPress.
Simplemente haz clic en los enlaces a continuación para saltar a tu sección preferida:
- Opción 1: Usando el bloque de widget de imagen de WordPress
- Opción 2: Usando un plugin de widget de imagen
- Opción 3: Usando el widget de galería de imágenes
- Opción 4: Agregando una imagen en el área de widget clásico
- Opción 5: Usando el bloque de widget de HTML personalizado
- Preguntas frecuentes sobre imágenes y barras laterales en WordPress
Opción 1: Usando el bloque de widget de imagen de WordPress
Nota: Este tutorial se aplica a Temas Clásicos que usan la pantalla estándar Apariencia » Widgets. Si estás usando un Tema de Bloques (como Twenty Twenty-Four), debes ir a Apariencia » Editor para modificar tu barra lateral.
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.
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.
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í. Esto ayuda a los lectores de pantalla a comprender la imagen y mejora tu clasificación SEO.
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.
🔎 ¿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
Otra forma de agregar imágenes es usando un plugin.
Podrías preferir este método si deseas una interfaz heredada específica o si no te sientes cómodo con el editor de bloques predeterminado.
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’.
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.
Puedes agregar un título o texto alternativo, así como un enlace y un pie de foto 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.
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.
Opción 3: Usando el widget de galería de imágenes
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’.
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’.
Si deseas más opciones de personalización, te recomendamos usar un plugin de galería de imágenes como Envira Gallery.
Ofrece adaptabilidad móvil, funcionalidad de lightbox y velocidad optimizada que el widget predeterminado no tiene. También puedes agregar marcas de agua a tus imágenes para proteger tu trabajo.
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.
Todo lo que necesitas hacer a continuación es elegir la galería que deseas mostrar.
Haz clic en el menú desplegable para hacerlo.
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'.
Opción 4: Agregando una imagen en el área de widget clásico
Si estás utilizando una versión anterior de WordPress o has deshabilitado los bloques de widgets, también puedes agregar fácilmente una imagen a la barra lateral.
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.
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.
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.
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.
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.
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.
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.
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 fácilmente imágenes una al lado de la otra 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 código. Alternativamente, puedes usar el editor de bloques en Apariencia » Widgets para agrupar bloques, agregar colores de fondo y dar estilo a los 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 obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.
Holly
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.
The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages.
Gracias,
Holly
Soporte de WPBeginner
Thanks for sharing your resolution
Administrador
Holly
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
Soporte de WPBeginner
Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show
Administrador
Alice
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?
Soporte de WPBeginner
Es posible que desees intentar borrar tu caché para asegurarte de que no sea la causa: https://014.leahstevensyj.workers.dev/beginners-guide/how-to-clear-your-cache-in-wordpress/
Además, si consultas con el soporte de tu tema, es posible que haya una configuración específica del tema que necesite ser cambiada.
Administrador
Kathy Turner
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?
harika
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?
Micky
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!
Doma
Gracias, fue rápido y al grano... muy útil.
MS Rahman
Quiero mostrar una imagen predeterminada cuando no hay nada en el widget. ¿Cómo hago esto?
Gracias
Krishna
¿Hay alguna forma de configurar la imagen para que se muestre solo en la página de inicio?
Sara william
Gracias. Me estoy esforzando por subir mi foto de perfil y ahora se puede hacer fácilmente.
Anette
¡Gracias por explicarlo en pasos sencillos!
Rebecca Claxton
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!
Soporte de WPBeginner
Hola Rebecca,
We are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Administrador
Karthik Marripoodi
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?
Minhaz
gran publicación, me encanta wpbeginner
Mark
Creo que el video decía "Etiqueta Alt". Esa no sería la terminología correcta, sería el Atributo Alt de la etiqueta.
Victoria
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?
Soporte de WPBeginner
Hola Victoria,
Por favor, echa un vistazo a nuestro artículo sobre deberías instalar plugins no probados con tu versión de WordPress.
Administrador
melessa
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.
Soporte de WPBeginner
Consulta nuestra guía sobre cómo agregar imágenes de Gravatar redondas en WordPress. El artículo habla de Gravatar, pero puedes usar el CSS con cualquier imagen.
Administrador
Rod
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 }
Sam
¿Cómo puedo hacer que la imagen sea un enlace clickeable?
Gracias
David
¡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!
Molly
¡Gracias, esto es exactamente lo que necesitaba y lo hiciste muy fácil!
Soporte de WPBeginner
Hola Molly,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Administrador
Sandra Wiese
¡Muchas gracias, funciona perfectamente!
Soporte de WPBeginner
Hola Sandra,
We are glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Administrador
Jana
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!
Soporte de WPBeginner
Puedes crear una imagen más pequeña en tu computadora usando cualquier herramienta de edición de imágenes y luego subir esa imagen.
Administrador
James McAllister
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.
Marvis
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.
Soporte de WPBeginner
Por favor, consulta nuestra guía sobre cómo administrar anuncios en WordPress con Adsanity.
Administrador
Abbie
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?
Paul
Sube a tu biblioteca de medios
Nikki
Gracias, esto fue muy útil. el video podría haber sido un poco más lento
Luke
¡Gracias por la ayuda! Definitivamente es más fácil simplemente obtener el plugin de widget de imagen.
manmohan
Me es de gran ayuda... gracias por esta publicación.
Pero tengo una pregunta
Erica
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í.
Soporte de WPBeginner
Por favor, consulta nuestra guía cómo crear fácilmente galerías de imágenes responsivas de WordPress con Envira.
Administrador
Giulia
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!
Gregor Egan
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
Personal de WPBeginner
Gracias Lee, estamos trabajando en eso.
Lee
Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful.
Sheryl Anderson
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
Sultan Ayyaz
La idea del widget de imagen es realmente nueva y muy útil para agregar imágenes en WordPress. Artículo muy útil.
Fiona
He querido aprender a hacer esto. Momento perfecto. ¡Gracias!
chzumbrunnen
Otra buena forma es usar el widget de texto pero con el Editor TinyMCE (como se usa para las entradas). Hay un plugin para eso (en realidad hay más de uno): https://wordpress.org/plugins/black-studio-tinymce-widget/