Publicar artículos con cierto orden y vista en ocasiones es fundamental o simplemente si quieres dar una mejor vista a tus artículos; una opción es hacer mas vistosas tus imágenes publicadas, por ejemplo agregar un borde o sombra al rededor de las imágenes, esto lo puedes hacer desde el editor de imagines que utilices o por medio de código CSS el cual es el que te voy a mostrar aquí.
Ejemplo de Imagen con sombra:
La imagen se visualizara con doble borde ya que utilizo estas sombras en el sitio.
Ejemplo de imagen con marco o borde:
La imagen se visualizara con doble borde ya que utilizo estas sombras en el sitio.
Tabla de contenido:
Agregar Marco o sombra con código CSS
Si no quieres llenar de Plugins tu sitio WordPress puedes optar por agregar código CSS personalizado manualmente al Theme que utilizas.
O en el caso que desees varios diseños diferentes de marcos tendrás que optar por utilizar código CSS, ya que los plugins que encontramos solamente permiten añadir un dolo diseño de marco o sombra.
Te puede interesar el sitio cssmatic y css-generator de angrytools para generar el código CSS del borde de las imágenes.
Código CSS para agregar sombra a imágenes seleccionadas.
Código CSS para agregar sombra al rededor de todas las imágenes publicadas.
Código CSS para agregar borde o marco
Insertar Clase CSS en la imagen en WordPress
Cuando deseamos añadir el marco o sombra en a las imágenes seleccionadas debemos seleccionar la imagen, Editar para abrir la configuración detalles de la imagen.
En Detalles de la imagen vemos Clases CSS de la imagen, aquí vamos a añadir la clase que creamos con el CSS personalizado ejemplo: img-marco (en base a los códigos compartidos anteriormente, yo en la siguiente imagen utilizo img-borde).
Plugin para agregar Marco o sombra a las imágenes
Podemos instalar el plugin WP Image Borders (No funciona correctamente en WordPress 4.9.4 en espera de actualización) o Advanced Image Styles y crear el borde deseado a las imágenes.
[uix_icons size=’14’ units=’px’ color=’#007fff’ name=’link’]¿Como instalar un Plugin en WordPress?
Utilizando Advanced Image Styles para añadir un marco debemos entrar a la configuración de editar de la imagen y agregar la configuración del borde.
Ahora en Detalles de la imagen en la seccion Opciones Avanzadas encontraras habilitadas las opciones Image Border e Image Margin.
Una vez aplicado, mostrara el marco en la imagen.