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.
Una vez estamos en edita imagen escribimos borde en el campo donde dice clase CSS de la imagen, todo en minúsculas.
Ahora vamos a ir a apariencia > editar CSS.
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».
.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:
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 ;
}
Ejemplo clase borde1 color rojo y 5 pixels de grosor:
.borde1{
border:#FD0101 solid 5px ;
}
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!
Dejar una contestacion