[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/wordpress\/como-agregar-un-borde-alrededor-de-una-imagen-en-wordpress\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/wordpress\/como-agregar-un-borde-alrededor-de-una-imagen-en-wordpress\/","headline":"C\u00f3mo agregar un borde alrededor de una imagen en WordPress","name":"C\u00f3mo agregar un borde alrededor de una imagen en WordPress","description":"\u00bfQuieres agregar un borde alrededor de tus im\u00e1genes en WordPress? Recientemente, uno de nuestros usuarios nos pidi\u00f3 una manera f\u00e1cil de agregar un borde alrededor ... Leer m\u00e1s<\/a>","datePublished":"2021-06-23","dateModified":"2021-06-23","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-un-borde-alrededor-de-una-imagen-en-WordPress.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-un-borde-alrededor-de-una-imagen-en-WordPress.png","height":300,"width":520},"url":"https:\/\/xn--adrimadiseo-beb.com\/wordpress\/como-agregar-un-borde-alrededor-de-una-imagen-en-wordpress\/","about":["Wordpress"],"wordCount":1077,"articleBody":"\u00bfQuieres agregar un borde alrededor de tus im\u00e1genes en WordPress? Recientemente, uno de nuestros usuarios nos pidi\u00f3 una manera f\u00e1cil de agregar un borde alrededor de una imagen en WordPress. Si bien puede usar CSS, es confuso para los principiantes. En este art\u00edculo, le mostraremos una manera f\u00e1cil de agregar un borde de imagen en WordPress sin editar ning\u00fan c\u00f3digo HTML o CSS.Tutorial en videoSi no le gusta el video o necesita m\u00e1s instrucciones, contin\u00fae leyendo.M\u00e9todo 1: usar un complemento para agregar un borde de imagen en WordPressEste m\u00e9todo es para principiantes que no desean editar HTML o CSS. Lo primero que debe hacer es instalar y activar el Bordes de imagen WP enchufar. Tras la activaci\u00f3n, debe visitar Configuraci\u00f3n \u00bbBordes de imagen de WP para configurar los ajustes del complemento. La primera secci\u00f3n en la configuraci\u00f3n del complemento le permite orientar im\u00e1genes. Puede agregar bordes a todas las im\u00e1genes en sus publicaciones de WordPress marcando la casilla junto a ‘Agregar bordes a todas las im\u00e1genes en las publicaciones del blog’ opci\u00f3n. Alternativamente, puede apuntar a clases CSS espec\u00edficas para que tengan bordes. Le mostraremos c\u00f3mo agregar una clase CSS a una imagen espec\u00edfica m\u00e1s adelante en este art\u00edculo. Ahora mismo puedes poner cualquier cosa en la clase CSS como .border-image. La segunda secci\u00f3n en la configuraci\u00f3n del complemento le permite personalizar la configuraci\u00f3n de los bordes. Puede elegir un estilo de borde, ancho, radio y color. La \u00faltima secci\u00f3n de la p\u00e1gina de configuraci\u00f3n le permite agregar sombras paralelas a sus im\u00e1genes. Puede ingresar una distancia horizontal y vertical, difuminar y extender el radio, as\u00ed como el color de la sombra del cuadro. Si no desea agregar sombras paralelas a sus im\u00e1genes, simplemente deje estos campos en blanco. No olvide hacer clic en el bot\u00f3n Guardar cambios para almacenar la configuraci\u00f3n de su complemento. Si seleccion\u00f3 la primera opci\u00f3n ‘Agregar bordes a todas las im\u00e1genes en las publicaciones del blog’, entonces no necesita hacer nada m\u00e1s.Deber\u00eda ver los bordes de las im\u00e1genes en todas las im\u00e1genes de las publicaciones de su blog.Sin embargo, si seleccion\u00f3 la segunda opci\u00f3n para mostrar solo el borde para im\u00e1genes espec\u00edficas, debe seguir el siguiente paso.Agregar clase CSS a una imagen en WordPressSi solo desea agregar bordes alrededor de las im\u00e1genes seleccionadas, deber\u00e1 decirle a WordPress qu\u00e9 im\u00e1genes deben tener bordes. Puede hacer esto agregando una clase CSS a las im\u00e1genes que necesitan bordes. Simplemente cargue su imagen y agr\u00e9guela a su publicaci\u00f3n. Despu\u00e9s de agregar la imagen, haga clic en ella en el editor visual y luego haga clic en el bot\u00f3n editar en la barra de herramientas. Aparecer\u00e1 una ventana emergente de edici\u00f3n de im\u00e1genes que muestra los detalles de la imagen. Debe hacer clic en Opciones avanzadas para expandirlo y luego ingresar la clase css de su imagen. Pista: esto es .border-image porque lo seleccionamos en la configuraci\u00f3n de nuestro complemento.A continuaci\u00f3n, haga clic en el bot\u00f3n de actualizaci\u00f3n para guardar y actualizar la configuraci\u00f3n de la imagen. Eso es todo, tu imagen ahora tendr\u00e1 una clase adicional. Dado que est\u00e1 utilizando el complemento WP Image Borders, aparecer\u00e1 un borde en esta imagen.M\u00e9todo 2: usar HTML y CSS para agregar bordes de imagen en WordPressAgregar bordes de im\u00e1genes usando CSS \/ HTML es una forma m\u00e1s r\u00e1pida y r\u00e1pida de obtener bordes alrededor de sus im\u00e1genes en WordPress. Hay muchas formas de hacer esto y se las mostraremos todas. Puede elegir lo que mejor se adapte a sus necesidades. Agregar bordes usando estilos en l\u00ednea en WordPressUna vez que haya cargado e insertado su imagen en una publicaci\u00f3n de WordPress, cambie al editor de texto. Ver\u00e1 el c\u00f3digo HTML de su imagen. Se ver\u00e1 algo como esto: <img src=\"http:\/\/www.example.com\/wp-content\/uploads\/2015\/04\/bluebird-300x203.jpg\" alt=\"bluebird\" width=\"300\" height=\"203\" class=\"alignnone size-medium wp-image-36\" \/>Puede agregar f\u00e1cilmente estilo CSS en el c\u00f3digo HTML de esta manera: <img src=\"http:\/\/www.example.com\/wp-content\/uploads\/2015\/04\/bluebird-300x203.jpg\" alt=\"bluebird\" width=\"300\" height=\"203\" class=\"alignnone size-medium wp-image-36\" style=\"border:3px solid #eeeeee; padding:3px; margin:3px;\" \/>Si\u00e9ntase libre de cambiar el ancho, el color, el relleno y el margen del borde seg\u00fan sus propias necesidades. Agregar borde de imagen en su tema de WordPress o tema secundarioSi desea agregar bordes de forma permanente a todas las im\u00e1genes en las publicaciones y p\u00e1ginas de su blog de WordPress, puede agregar CSS directamente en su tema de WordPress o tema hijo. La mayor\u00eda de los temas de WordPress ya tienen estas reglas de estilo definidas en la hoja de estilo del tema, que generalmente es el archivo style.css. Puede modificar el CSS existente o puede agregar su propio CSS en un tema hijo. WordPress agrega clases de im\u00e1genes predeterminadas a todas las im\u00e1genes. Para asegurarse de que las im\u00e1genes en sus publicaciones \/ p\u00e1ginas tengan un borde de imagen, debe orientar sus anuncios a todas estas clases. Aqu\u00ed hay un fragmento de CSS simple para comenzar: img.alignright {float:right; margin:0 0 1em 1em;border:3px solid #EEEEEE;}img.alignleft {float:left; margin:0 1em 1em 0;border:3px solid #EEEEEE;}img.aligncenter {display: block; margin-left: auto; margin-right: auto;border:3px solid #EEEEEE;}img.alignnone { border:3px solid #EEE; }Si solo desea usar bordes de imagen cuando los necesite, puede agregar la clase CSS a sus im\u00e1genes (ver arriba). Agregue reglas de estilo para esta clase de CSS en su tema o tema hijo. img.border-image { border: 3px solid #eee;padding:3px; margin:3px;}Esperamos que este art\u00edculo le haya ayudado a agregar un borde de imagen alrededor de las im\u00e1genes de su blog de WordPress. Es posible que tambi\u00e9n desee ver nuestra gu\u00eda sobre c\u00f3mo guardar im\u00e1genes optimizadas para la web para acelerar su sitio de WordPress.Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.9 \/ 5 ( 406 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar un borde alrededor de una imagen en WordPress","item":"https:\/\/xn--adrimadiseo-beb.com\/wordpress\/como-agregar-un-borde-alrededor-de-una-imagen-en-wordpress\/#breadcrumbitem"}]}]