Cómo agregar un borde alrededor de una imagen en WordPress (3 métodos sencillos)

¿Alguna vez sientes que tus imágenes simplemente desaparecen en el fondo de tu sitio de WordPress? Eliges excelentes visuales, pero una vez que están en la página, se ven planos, como si apenas estuvieran allí.

Esto sucede mucho, especialmente en diseños limpios y blancos. Y puede hacer que tu contenido se sienta menos atractivo, incluso cuando todo lo demás se ve pulido.

Aquí es donde agregar un borde simple puede marcar una gran diferencia.

En WPBeginner, nos gusta agregar bordes limpios alrededor de nuestras capturas de pantalla para ayudarles a destacar y mejorar la apariencia general de nuestras páginas. Es uno de nuestros trucos favoritos para una mejor participación, un diseño más equilibrado y una sensación más profesional.

En esta guía, te mostraremos tres formas sencillas de agregar un borde alrededor de una imagen en WordPress. Al final, sabrás cómo hacer que tus imágenes resalten y mantener a los visitantes interesados en tu contenido. 🙌

¿Por qué agregar un borde alrededor de una imagen en WordPress?

Un borde ayuda a que tus imágenes destaquen del resto de tu contenido, especialmente en páginas con fondos claros o recargados. Crea un límite visual claro que hace que tus imágenes sean más fáciles de ver y más propensas a captar la atención.

Las imágenes son herramientas poderosas para la comunicación. Pueden compartir información rápidamente y hacer que las páginas con mucho texto sean más atractivas.

Sin embargo, a veces las imágenes pueden mezclarse con el fondo del sitio web. Esto es más probable si usas una imagen de fondo o si los colores de tu sitio son similares a los de tus imágenes.

Las personas con discapacidades visuales o daltonismo también pueden tener dificultades para distinguir las imágenes del fondo. Si deseas obtener más información, tenemos una guía sobre cómo mejorar la accesibilidad de tu sitio web de WordPress.

Agregar un borde alrededor de una imagen en WordPress distingue claramente la imagen del fondo de tu sitio. También es una excelente manera de llamar la atención sobre tus elementos visuales más importantes.

Con esto en mente, te guiaremos sobre cómo puedes agregar un borde alrededor de una imagen en tu blog de WordPress.

Aquí tienes un resumen rápido de todos los métodos que cubriremos en este artículo:

• Método 1: Usar clases CSS personalizadas para agregar un borde alrededor de una imagen en WordPress
• Método 2: Usar un constructor de páginas para agregar un borde alrededor de una imagen en WordPress
• Método 3: Usar HTML y CSS para agregar un borde alrededor de una imagen en WordPress
• Consejo extra: Usar una herramienta de diseño gráfico para agregar un borde alrededor de una imagen
• Preguntas frecuentes: Agregar un borde alrededor de una imagen en WordPress
• Más guías para usar imágenes en WordPress

¿Listo? Empecemos.

Método 1: Usar clases CSS personalizadas para agregar un borde alrededor de una imagen en WordPress

Crear una clase CSS personalizada es una forma inteligente y fácil de agregar bordes a tus imágenes. Una clase CSS es un bloque reutilizable de código que te permite aplicar el mismo estilo, como bordes, colores o espaciado, a varios elementos en tu sitio.

Por lo tanto, en lugar de editar cada imagen una por una, puedes definir la configuración de tu borde en un solo lugar y aplicarla donde la necesites con solo unos pocos clics. Esto es perfecto si planeas agregar bordes a varias imágenes en tu sitio.

Hay algunas maneras de crear una clase CSS personalizada. Puedes usar el personalizador de temas, el Editor de Sitio Completo o el plugin WPCode.

Siempre recomendamos usar el plugin WPCode porque es fácil de usar para principiantes e independiente del tema. Esto significa que tu CSS personalizado seguirá funcionando incluso si cambias a un tema diferente.

En todas nuestras marcas asociadas, usamos WPCode para agregar y administrar fragmentos de código personalizados. Para obtener más información al respecto, consulta nuestra reseña detallada de WPCode.

Así que instalemos y activemos el plugin WPCode. Si necesitas ayuda, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Al activarlo, deberás navegar a Fragmentos de código » + Agregar fragmento.

Luego, puedes pasar el cursor sobre la opción ‘Agregar tu código personalizado (Nuevo fragmento)’ y hacer clic en ‘Usar fragmento’.

En la siguiente pantalla, WPCode te pedirá que elijas un tipo de código.

Es posible que notes que la configuración predeterminada de WPCode apunta a ‘Fragmento de PHP’, pero aquí, deberás hacer clic en ‘Fragmento de CSS’.

Esto abrirá el editor de WPCode. Desde aquí, primero puedes crear un nombre para el fragmento personalizado. Por ejemplo, usamos ‘border-black’.

Ten en cuenta que al crear tu clase CSS, deberás especificar el color y el ancho del borde.

Por ejemplo, puedes establecer píxeles (px) para el ancho y un código de color hexadecimal para el color.

En el siguiente fragmento de código, estamos creando un borde negro de 5 píxeles de ancho:

.border-black {
    border: #000 solid 5px;
}

En el código de ejemplo anterior, border-black es el nombre de la clase CSS (el mismo que nuestro fragmento de código personalizado en WPCode, lo que facilita la organización).

Puedes usar el nombre que desees, pero deberás escribir el nombre de la clase CSS cada vez que quieras crear un borde. Teniendo esto en cuenta, querrás crear un nombre de clase CSS que sea corto y fácil de recordar.

Ahora, todo lo que necesitas hacer es copiar ese fragmento de código en el campo ‘Vista previa del código’ de WPCode de esta manera:

Después de eso, puedes cambiar el interruptor para activar el fragmento y presionar el botón ‘Guardar Fragmento’ o ‘Actualizar’. Para instrucciones detalladas, puedes ver nuestra guía sobre agregar CSS personalizado a WordPress.

Puedes agregar tantas clases CSS como quieras. Por ejemplo, podrías crear bordes que tengan diferentes colores.

Ahora, agregar un borde a una imagen es bastante sencillo.

Para empezar, haz clic en la imagen en tu página o publicación de WordPress. Luego, deberás buscar la pestaña ‘Bloque’ en el lado derecho de tu pantalla y localizar la opción ‘Avanzado’ allí.

Haz clic para expandir la sección.

En el campo ‘CLASE(S) CSS ADICIONAL(ES)’, puedes escribir el nombre de la clase CSS que deseas agregar a la imagen.

Ten en cuenta que, como puedes ver en la siguiente imagen, el borde no aparecerá en el editor de contenido de WordPress.

Para ver cómo se verá el borde para tus visitantes, haz clic en el botón ‘Vista previa’.

Ahora verás tu imagen con el borde aplicado.

Si estás satisfecho con cómo se ve el borde, entonces solo necesitas publicar o actualizar la página.

Método 2: Usar un constructor de páginas para agregar un borde alrededor de una imagen en WordPress

Otro método es usar un plugin de constructor de páginas.

Los constructores de páginas de arrastrar y soltar te permiten diseñar y personalizar fácilmente páginas web, como páginas de inicio de sesión y páginas de destino. Puedes agregar texto, imágenes y otros elementos sin necesidad de conocimientos de codificación.

Estas herramientas también te permiten crear fácilmente bordes únicos para cada imagen. Puedes diseñarlos usando un editor visual, lo cual es más fácil para muchas personas.

Recomendamos SeedProd, que es el mejor constructor de páginas de destino para WordPress. Es fácil de usar y te permite crear páginas de aspecto profesional fácilmente.

No dudes en consultar nuestra reseña completa de SeedProd para ver por qué recomendamos esta herramienta.

SeedProd tiene un bloque de Imagen especial con opciones de borde integradas. También puedes agregar sombras fácilmente y ajustar el espaciado.

Primero, necesitarás instalar y activar el plugin. Si necesitas ayuda, por favor consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Al activar, vamos a SeedProd » Landing Pages desde tu panel de WordPress.

SeedProd viene con cientos de plantillas diseñadas profesionalmente, que están agrupadas en categorías. A lo largo de la parte superior de la pantalla, verás categorías que puedes usar para:

• Crear una página 404.
• Crear una página de inicio de sesión personalizada.
• Diseñar una hermosa página de "próximamente".
• Y más.

Para echar un vistazo a un diseño, simplemente pasa el mouse sobre una plantilla y luego haz clic en el ícono de la lupa cuando aparezca.

Esto mostrará una vista previa de la plantilla.

Si estás satisfecho con cómo se ve la plantilla, entonces haz clic en 'Elegir esta plantilla'.

En el campo 'Nombre de la página', escribe un nombre para la página. Por defecto, SeedProd usará este nombre como la URL de la página.

Si deseas cambiar esta URL creada automáticamente, simplemente edita el texto en el campo 'URL de la página'.

Una vez que hayas ingresado la información, puedes hacer clic en el botón 'Guardar y empezar a editar la página'. Esto abrirá la plantilla elegida en el editor de arrastrar y soltar de SeedProd.

En el menú de la izquierda, verás todos los bloques que puedes agregar a tu página de WordPress usando arrastrar y soltar.

Simplemente busca el bloque 'Imagen' y arrástralo a tu diseño de página.

Una vez que lo hayas hecho, haz clic en el bloque 'Imagen' para ver todas las configuraciones que puedes usar para personalizar el bloque.

En el menú de la izquierda, querrás hacer clic en 'Usar tu propia imagen'.

Ahora puedes elegir cualquier imagen de la biblioteca de medios de WordPress.

Después de eso, haz clic en la pestaña 'Avanzado' en el menú de la izquierda.

Luego, haz clic para expandir la sección 'Borde de imagen'.

Por defecto, todas las configuraciones de Ancho de Borde de SeedProd son 0, lo que significa que la imagen no tiene borde.

Lo primero que querrás hacer es aumentar estos valores a 1 o más. Esto agregará un borde visible a la imagen.

Para empezar, haz clic en cada uno de los campos de 'Ancho de Borde' y luego escribe un número mayor o usa los botones de flecha que aparecen.

Cuando estés satisfecho con el grosor del borde, puedes empezar a estilizarlo.

Una opción es cambiar el color del borde haciendo clic en el campo junto a 'Color de Borde'. Esto abrirá una ventana emergente donde puedes elegir un nuevo color de borde.

SeedProd ofrece tres estilos de borde sencillos: sólido, punteado y discontinuo. Puedes elegir el que mejor se adapte a tu imagen.

Para probar estos diferentes estilos de borde, simplemente abre el menú desplegable ‘Estilo de borde’ y luego elige una opción de la lista.

¡Ahí lo tienes!

Y si quieres añadir un borde a otras imágenes, solo sigue el mismo proceso descrito anteriormente.

Una vez que estés satisfecho con el diseño de tu página, puedes hacer clic en el botón ‘Guardar’ y luego elegir ‘Publicar’ para que esté en línea.

Método 3: Usar HTML y CSS para agregar un borde alrededor de una imagen en WordPress

También puedes agregar bordes usando HTML y CSS. Este método no requiere un plugin, lo cual puede ser útil.

Sin embargo, personalizar la apariencia del borde significa escribir algo de código, por lo que podría no ser la mejor opción para principiantes. Si te sientes cómodo con un poco de codificación, este método ofrece una gran flexibilidad.

Para empezar, agreguemos una imagen a cualquier página o publicación.

Una vez que lo hayas hecho, puedes hacer clic en el ícono de tres puntos en la esquina superior derecha y luego hacer clic en ‘Editor de código’.

WordPress ahora mostrará todo el código que compone la página o publicación.

Ahora puedes encontrar la sección de código que agrega la imagen a tu página. Este código comenzará con wp:image .

Si la página tiene varias imágenes, revisa el valor img src=. Esta es la URL de la imagen en tu biblioteca de medios de WordPress, y será diferente para cada imagen.

Una vez que hayas encontrado la sección de código correcta, el siguiente paso es escribir una línea de código que agregue el borde y controle cómo se estiliza.

Por ejemplo, en el siguiente fragmento de código, el borde tiene un ancho de 3 píxeles. También estamos agregando 3 píxeles de relleno y margen:

style="border:3px solid #000000; padding:3px; margin:3px;" />

En el código de ejemplo anterior, solid #000000 establece el color del borde. El valor #000000 es el código hexadecimal del color negro.

Y si no quieres crear un borde negro, puedes reemplazar el valor con cualquier otro código hexadecimal.

Una vez que hayas decidido el código del borde, deberás encontrar la sección /></figure> y agregar tu código directamente antes del primer carácter /.

Veamos un ejemplo:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Cuando estés satisfecho con tu código, sal del editor de código haciendo clic en 'Salir del editor de código'.

Ahora deberías ver un borde alrededor de tu imagen. No te preocupes si recibes una advertencia sobre HTML no válido. Esto es normal y no afectará cómo se muestra tu imagen.

Si estás satisfecho con cómo se ve, puedes continuar y actualizar o publicar tu página como de costumbre.

Ahora, si visitas tu sitio web de WordPress, verás un borde alrededor de tu imagen.

Consejo extra: Usar una herramienta de diseño gráfico para agregar un borde alrededor de una imagen

Si bien WordPress ofrece varios métodos para agregar bordes, estas opciones a veces pueden ser limitadas en estilo y personalización. Entonces, ¿por qué no editar tu imagen primero y luego subirla a WordPress?

Aquí es donde las herramientas de diseño gráfico son útiles.

Adobe Photoshop es el gran jugador aquí, con toneladas de funciones elegantes para los profesionales. Si no quieres gastar una fortuna, entonces Affinity Photo es una opción sólida: tiene trucos similares, pero solo pagas una vez.

Para una experiencia más fácil de usar y basada en navegador, Canva es una herramienta excelente. Nuestro equipo la usa regularmente para diseñar imágenes destacadas y gráficos para redes sociales rápidamente.

Y si cuidas tu cartera, GIMP (GNU Image Manipulation Program) puede ser tu opción. Es totalmente gratuito, de código abierto y puede hacer mucho de lo que hacen las herramientas de pago.

GIMP también es una excelente opción tanto para principiantes como para usuarios experimentados. Puedes usarlo en Mac y Windows.

En este tutorial, te mostraremos cómo puedes agregar un borde alrededor de una imagen usando GIMP.

Al instalarlo, querrás abrir la aplicación de escritorio de GIMP. Luego, puedes hacer clic en Archivo » Abrir y elegir una imagen para editar desde tu disco local. O bien, puedes arrastrar y soltar una en el editor de GIMP.

Una vez que la imagen se cargue en el editor de GIMP, dibujemos un borde alrededor de la imagen usando la 'Herramienta de Selección Rectangular'. Puedes encontrar esta herramienta en la barra de herramientas en la esquina superior izquierda.

A continuación, es posible que desees verificar la configuración de tus colores de primer plano y fondo.

Esto se debe a que GIMP utiliza el color de primer plano para trazar las líneas. Por lo tanto, si necesita usar un color específico para su borde, puede hacer clic en el color de primer plano para ajustarlo.

Esto abrirá el selector de color, donde puede mover el mouse sobre el área de selección de color o insertar el código hexadecimal del color.

Una vez que haya hecho esto, puede hacer clic en 'Aceptar'.

Ahora que ha establecido el color de su borde, es hora de aplicarlo. Puede navegar a Editar » Trazar selección, y esto abrirá la ventana emergente 'Trazar selección'.

Aquí, puede ajustar el estilo del trazo, el ancho de la línea y más. Por ejemplo, establecimos nuestro ancho de línea en 5 px.

Una vez que lo haya hecho, haga clic en 'Trazar', y el borde ahora debería agregarse a su imagen.

Antes de subir a WordPress, es posible que desee optimizar la imagen para mantener una excelente velocidad y rendimiento del sitio. Las imágenes sin procesar a menudo son grandes, por lo que este paso puede ser de gran ayuda.

En GIMP, puede optimizar su imagen redimensionándola.

Para comenzar, querrá navegar a Imagen » Escalar imagen. Esto abrirá la ventana emergente 'Escalar imagen', donde puede ajustar el 'Tamaño de imagen' de la siguiente manera:

Después de ajustar el tamaño de la imagen, puede hacer clic en el botón 'Escalar'.

GIMP redimensionará la imagen y mostrará la nueva versión en el editor.

Una vez hecho esto, puede guardar la imagen yendo a Archivo » Exportar como.

Luego, puedes seguir las indicaciones para elegir una ubicación, nombrar el archivo y definir el formato de imagen. Cuando todo esté listo, haz clic en ‘Exportar’.

Ahora, puedes subir tu imagen a tu publicación o página de WordPress. Así es como podría verse en el editor de bloques:

¡Eso es todo! Has aprendido a agregar un borde alrededor de una imagen usando una herramienta de diseño gráfico.

Puedes usar este método cada vez que quieras subir una imagen a WordPress.

Preguntas frecuentes: Agregar un borde alrededor de una imagen en WordPress

¿Todavía tienes preguntas sobre cómo estilizar tus imágenes? Aquí tienes algunas preguntas frecuentes para ayudarte a solucionar problemas, personalizar y sacar el máximo provecho de agregar bordes en WordPress.

¿Puedo agregar el mismo borde a todas las imágenes de mi sitio a la vez?

Sí, puedes hacerlo con CSS personalizado aplicando estilos a la etiqueta img principal. Sin embargo, esto también puede afectar elementos como logotipos, íconos o imágenes en widgets.

Para un mejor control, recomendamos crear una clase CSS (como en el Método 1) y aplicarla solo a las imágenes donde quieras el borde.

¿Cómo puedo crear esquinas redondeadas para el borde de mi imagen?

Puedes crear fácilmente esquinas redondeadas usando la propiedad CSS border-radius. Simplemente agrega una línea border-radius: 15px; a tu fragmento de CSS personalizado. Cuanto mayor sea el valor en píxeles, más redondeadas serán las esquinas.

¿Puedo eliminar un borde que mi tema de WordPress agrega automáticamente?

Sí. Para anular esto, puedes crear una clase CSS personalizada, por ejemplo, .no-border con border: none !important;. Luego puedes aplicarla a imágenes específicas usando el campo ‘Clase(s) CSS Adicional(es)’ en la configuración del bloque o de la imagen.

¿Agregar un borde CSS ralentizará mi sitio web?

No, un borde CSS simple es solo una línea de código y no tiene un impacto notable en la velocidad de carga de tu página. El tamaño del archivo de la imagen en sí es lo que afecta el rendimiento, así que siempre asegúrate de optimizar tus imágenes para la web.

Más guías para usar imágenes en WordPress

Esperamos que este artículo te haya ayudado a aprender cómo agregar un borde alrededor de una imagen en WordPress.

Si encontraste esto útil, entonces también puedes consultar nuestras guías sobre:

• Cómo agregar imágenes correctamente en WordPress
• Cómo hacer edición básica de imágenes en WordPress
• Cómo redimensionar y hacer imágenes más grandes sin perder calidad
• Cómo crear tamaños de imagen adicionales en WordPress
• Cómo cargar imágenes de forma diferida (lazy load) fácilmente en WordPress
• Texto alternativo de imagen vs. título de imagen en WordPress
• Cómo agregar una imagen principal en WordPress (funciona para todos los temas)
• Los mejores plugins y herramientas de imágenes destacadas para 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.