Añadir borde en las imágenes WordPress

añadir marco en imagenes wordpress

Muchas veces las imágenes que colgamos en nuestros artículos no se diferencian bien del fondo, añadir un borde es una mejora visual importante que ayuda a dar contraste a tus imágenes de forma que el visitante puede tener una mejor experiencia.

Añadir clase borde imágenes

Es un proceso sencillo que no requiere conocimientos en programación ya que simplemente tienes que copiar las etiquetas CSS que te voy a dejar aquí.

Una vez tenemos la imagen añadida ya sea en una pagina o entrada, vamos a darle clic en editar para que nos aparezcan las opciones de imagen y buscamos donde dice clase CSS de la imagen.

añadir borde en imagenes wordpress
Editar imagen Wordpres

Una vez estamos en edita imagen escribimos borde en el campo donde dice clase CSS de la imagen, todo en minúsculas.

añadir borde en las imagenes de wordpress
Añadir una clase CSS en una imagen WprdPress

Ahora vamos a ir a apariencia > editar CSS.

hacer efecto zoom imagen wordpress
Editar CSS WordPress

Añadir código CSS borde imágenes

Ahora vamos añadir unas etiquetas CSS muy sencillas a la clase que acabamos de añadir en la imagen “borde”.

añadir marco en imagenes wordpress
CSS borde imágenes WordPress.

.borde{
border:#B5AFBD solid 3px ;
}

Este código es personalizable a tu gusto lo único que no puede variar es la clase .borde y la etiqueta border que siempre tiene que ser iguales.

Donde hay el código exadecimal #B5AFBD es el color del borde que podemos modificarlo con el color que queramos.

Donde dice 3px se refiere al grosor del marco o borde de la imagen cuanto mas elevado el valor mas grueso sera el borde de la imagen.

Te dejo un enlace donde podrás escoger colores para personalizar el borde de tus imágenes en WordPress

https://htmlcolorcodes.com/es/

Ahora podemos ver un ejemplo de la misma imagen con o sin borde:

añadir borde en imagenes wordpress
Imagen de prueba sin borde
añadir borde en imagenes wordpress
Imagen de prueba con borde

Ahora siempre que pongamos la clase borde en una imagen automáticamente le dará el estilo que hayamos personalizado en el editor CSS, es algo muy practico ya que no tenemos que ir editando imagenes con Photoshop  para darle un simple borde.

Podemos asignar diferentes estilos utilizando dos clases distintas y aplicar el que mas nos convenga en cada caso. Por ejemplo podemos guardar la clase borde1 con un grosor y color diferente de modo que al escribir la clase en la imagen podamos elegir entre  borde o borde1.

Ejemplo clase borde, color gris y 3 pixels de grosor:

.borde{
border:#B5AFBD solid 3px ;
}

añadir borde en imagenes wordpress
Imagen de prueba clase borde

Ejemplo clase borde1 color rojo y 5 pixels de grosor:

.borde1{
border:#FD0101 solid 5px ;
}

añadir borde en imagenes wordpress
Imagen de prueba clase borde1

Te dejo un vídeo de como añadir borde en las imágenes de WordPress espero que te sirva!

Tienes un blog? Déjanos un comentario con enlace a tu blog y cuéntanos de que va, para que podamos echarle un ojo!

Sé el primero en comentar

Dejar una contestacion

Tu dirección de correo electrónico no será publicada.


*