­čÄĘ Como a├▒adir borde en las imagenes de Wordpress - YeaBit
a├▒adir marco en imagenes wordpress

Añadir borde en las imágenes 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!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *