Cómo crear un borde para tus imágenes en WordPress










  • ¿Quieres crear bordes para todas tus imágenes en WordPress? Las imágenes ayudan a mejorar su contenido e incluso pueden ser el contenido por sí mismas. Desafortunadamente, a veces las imágenes pueden ser difíciles de ver si se mezclan con el color de fondo. Por esta razón, los bordes son la mejor forma de separar la imagen del fondo en todos los sitios web.

    Hay varias formas de agregar bordes a sus imágenes en WordPress. Para empezar, puede agregar un borde incluso antes de importar una imagen a WordPress. Si crea sus imágenes con Photoshop o un software de edición de fotos similar, simplemente puede agregar el borde mientras lo crea. De esta manera, no tendrá que descargar un nuevo complemento o editar código. Hoy demostraré cómo crear un borde para sus imágenes en WordPress utilizando dos métodos.

    ¿Por qué agregar bordes de imagen en WordPress?

    Los bordes son la mejor manera de facilitar que su visitante separe una imagen del fondo. Los sitios web personalizan sus fondos para destacar entre la competencia. En un sitio web, puede ver un fondo de color sólido, mientras que en otro puede ver un patrón de líneas rayadas. Además de cambiar los colores, algunos desarrolladores web también usan imágenes para el fondo.

    Esto puede hacer que sea extremadamente difícil ver ciertas imágenes dependiendo de qué tan bien se mezclen. Esto puede no ser un problema para las audiencias más jóvenes con una mejor visión, pero si la edad de su audiencia es un poco mayor, es posible que pierda visitantes. Comprender la edad de su audiencia es muy importante cuando está ejecutando un sitio web. Esto le ayuda a elegir lo que es importante para ellos.

    Como se indicó anteriormente, le mostraré dos métodos para agregar bordes de imágenes a WordPress. El primer método implicará el uso de un complemento, mientras que el segundo método implicará el uso de un código personalizado.

    Echemos un vistazo al complemento que vamos a usar hoy y veamos todo lo que tiene para ofrecer.

    Complemento de imagen de borde

    Complemento de imagen de borde

    Border Image Plugin es un generador de imágenes en forma de complemento. Permite a los programadores y desarrolladores dibujar una imagen en los bordes de un elemento. Hay un montón de espacio para el diseño en el complemento. Si bien ofrece una gran cantidad de funciones excelentes, el complemento no ralentizará su sitio.

    Este complemento es muy útil porque en realidad es bastante complicado hacerlo por su cuenta usando un código personalizado, como le mostraré a continuación.

    El complemento de imagen de borde viene con algunas funciones excelentes. Algunos de los principales incluyen:

    • Muy fácil de usar
    • Use el generador de imágenes para crear un código abreviado que puede usar para envolver el contenido que desea que esté bordeado con una imagen
    • El generador le permitirá cargar cualquier imagen que se utilizará para hacer que su borde de contenido sea fantástico
    • Use el código abreviado en cualquier lugar de su sitio
    • Compatible con el editor de Gutenberg

    En general, el complemento le brinda una manera simple y fácil de agregar bordes de imagen en WordPress.

    Echemos un vistazo a los dos métodos que estamos usando hoy.

    Cómo agregar bordes de imagen en WordPress

    Hoy vamos a ver dos métodos diferentes para agregar un borde. La primera es mediante el uso de un complemento. El segundo requerirá un poco de codificación CSS.

    Agregar bordes de imagen en el método del complemento de WordPress

    Paso 1: Instalar y activar el complemento

    Antes de que pueda comenzar a agregar bordes a las imágenes en WordPress, primero debe instalar y activar el complemento. Puede hacerlo dirigiéndose a la página Complementos en el panel de administración de WordPress.

    Instale y active los bordes de la imagen del borde en el complemento de WordPress

    Simplemente use el campo de búsqueda que está disponible para buscar el complemento por nombre. Una vez que aparezca, instálelo y actívelo directamente desde allí.

    Paso 2: Vaya a la página de imágenes de borde

    Ahora que el complemento está activado, debe acceder a la página principal del Complemento de imágenes de borde para poder cargar una imagen y crear un borde en ella.

    Para hacer esto, haga clic en la pestaña "Imágenes de borde", ubicada en el área de menú de la izquierda del tablero. Verá que esta es ahora una opción disponible porque el complemento se ha activado.

    Haga clic en la pestaña Imagen de borde

    Esto lo lleva a la página principal del complemento, donde podrá comenzar a agregar bordes de imagen de inmediato en WordPress.

    Paso 3: seleccione una imagen para agregar un borde

    Ahora está en la página donde puede seleccionar una imagen para agregarle un borde. Continúe y haga clic en el botón "Seleccionar imagen" para seleccionar la imagen que desea.

    Haga clic en el botón Seleccionar imagen para agregar bordes de imagen en WordPress

    Agregue la imagen de su carpeta de medios.

    Paso 4: use las herramientas del editor de complementos para crear un borde

    Ahora que la imagen que desea está en el editor, comience a crear el borde con las herramientas disponibles. Puede ver que la primera sección desplegable se llama "Offest". Continúe y use esas herramientas para crear los efectos de compensación que desea.

    Herramientas de descuento

    Ahora, haz clic en el menú desplegable "Tamaño" y configura esas opciones como quieras también.

    Opción de tamaño para agregar bordes de imagen a wordpress

    Finalmente, use el tercer menú desplegable llamado "Repetir" para seleccionar las configuraciones para mostrar.

    Repetir

    Por último, pero no menos importante, haga clic en la pestaña "Color" ubicada junto a la pestaña de la imagen. Seleccione los colores (si corresponde) y luego finalice todo con el tamaño de la imagen.

    Elija colores y tamaños para los bordes de su imagen en WordPress

    Paso 5: vea su frontera en vivo

    En este punto, puede tomar el código que se genera y colocarlo en cualquier lugar de una publicación, página o widget. El borde que creó se mostrará alrededor del contenido que utilizó. Puede ver que la demostración que hice está vacía, pero el borde está ahí.

    Borde vivo

    Los bordes que cree tendrán más complejidad y una gama diferente de colores. ¡Eso es todo! Ha agregado con éxito bordes de imagen en WordPress usando el complemento.

    Agregar bordes de imagen en el método de código personalizado de WordPress

    La mayoría de los desarrolladores web prefieren el segundo método porque no necesitará agregar un complemento a su sitio web. Agregar código personalizado es muy fácil en WordPress y es lo que hace que la plataforma sea accesible para los principiantes.

    Aplicar bordes de imagen a todas las imágenes

    El primer método de codificación aplicará el borde a todas sus imágenes. Si desea bordes individuales, omita esta parte. En el panel de administración de la izquierda, haga clic en Apariencias y seleccione la opción Personalizar. Haga clic en el cuadro CSS adicional. Inserta el siguiente código en el cuadro de texto: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]img.alignright {

    float:right;


    margen:0 0 1em 1em;


    borde: 3px sólido #2992c1;


    }


    img.alignleft {


    float:izquierda;


    margen:0 1em 1em 0;


    borde: 3px sólido #2992c1;


    }


    img.aligncenter {


    pantalla: bloque;


    margen izquierdo: automático;


    margen derecho: automático;


    borde: 3px sólido #2992c1;


    }


    img.alinear ninguno {


    borde: 3px sólido #2992c1;


    }[/ht_mensaje]

    El #2992c1 es un tono específico de azul. No dude en cambiar este color para adaptarse a sus necesidades. También puede ajustar el grosor del borde. Ahora puede ver los cambios en su sitio web.

    Su borde ahora es visible.

    Aplicar bordes de imagen a imágenes individuales

    Agregar bordes individuales a sus imágenes es muy fácil, pero puede ser muy tedioso. Cada imagen que agrega en el editor visual tiene un código HTML creado en el editor de texto. Puede editar el código del editor de texto para agregar un borde.

    Aquí hay un código de imagen estándar: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]<img class=”border-image alignnone wp-image-34 size -medium” src=”https://www.ggsexample1.com/wp-content/uploads/2017/09/Capture-300×155.png” alt=”” width=”300″ height=”155″ /> [/ht_mensaje]

    Simplemente agregue la siguiente línea en el código HTML: [ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ]style=”border:3px solid #2992c1; relleno: 3px; margen:3px;”[/ht_message]

    Así es como debería verse el resultado final:

    <img class=”border-image alignnone wp-image-34 size-medium” style=”border: 3px sólido #eeeeee; relleno: 3px; margen: 3px;” src=”https://www.ggsexample1.com/wp-content/uploads/2017/09/Capture-300×155.png” alt=”” width=”300″ height=”155″ style=”border: 3px sólido #2992c1; relleno: 3px; margen:3px;” />

    Felicitaciones, ha agregado con éxito bordes a sus imágenes de WordPress. Puede editar el aspecto del borde en cualquier momento, independientemente del método que haya utilizado. Si eligió usar el complemento, una vez que se sienta más cómodo con la edición de código, le recomendaría usar el segundo método porque es más eficiente.

    Asegúrese de que el borde marque la diferencia

    Incluso si la frontera está en su lugar, es posible que en realidad no esté ayudando. Por ejemplo, si tiene un color de fondo negro y elige usar un borde negro, nada cambiará. Debe utilizar un color que se destaque en su sitio web. En ese ejemplo, un color de borde blanco sería una buena opción. También es una buena idea usar colores que coincidan con su tema, pero que se destaquen. Mientras el borde separe claramente la imagen del color de fondo, estará bien.

    Conclusión

    Agregar bordes de imagen en WordPress no tiene por qué ser demasiado difícil. Hay dos maneras de hacerlo. Puede usar un complemento, que la mayoría considera que es la forma más fácil, o puede agregar un código personalizado y hacerlo de esa manera si lo prefiere.

    ¿Qué color has elegido para tu borde? ¿Qué método has usado para agregar el borde? ¿Se siente incómodo al usar complementos antiguos que no se han actualizado en mucho tiempo?










  • Subir