Los filtros de imagen son actualmente un método muy popular para agregar un brillo de aspecto profesional a sus fotos. Si estás en Instagram o Snapchat, es probable que casi todas las imágenes que veas hayan pasado por algún tipo de filtro. Sin embargo, los filtros de imagen pueden ser mucho más que un simple truco: pueden proporcionar una manera rápida y fácil de mejorar las imágenes de su sitio web.
WordPress no viene con muchas capacidades de edición de imágenes listas para usar. Sin embargo, eso no significa que no pueda aprovechar sus beneficios dentro de la plataforma. En este artículo, hablaremos sobre por qué querría agregar filtros de imagen de WordPress, luego exploraremos cómo hacerlo usando un complemento o hojas de estilo en cascada (CSS). ¡Hagámoslo!
Los filtros de imagen son una excelente manera de personalizar las imágenes de su sitio web.
Si nunca los ha encontrado, piense en los filtros de imagen como ‘preestablecidos’ para lograr una determinada apariencia. Si bien algunas personas los descartan como un simple truco de las redes sociales, en realidad son una forma poderosa de personalizar gráficos. Además, son increíblemente útiles para los usuarios de WordPress, ya que la plataforma no le permite modificar las imágenes más allá de cambiar su tamaño y recortarlas.
Analicemos algunas de las cosas que puede hacer con los filtros de imagen de WordPress:
- Personaliza las imágenes para que encajen con tu estilo. Imagina, por ejemplo, que eres un fotógrafo con un portafolio de WordPress. Puede usar filtros de imagen para personalizar sus imágenes y crear una apariencia consistente sin tener que lidiar con herramientas de terceros.
- Marca tus medios. Muchos sitios web utilizan tipos específicos de imágenes para su contenido. Por ejemplo, es posible que haya notado que la mayoría de las imágenes destacadas en nuestro blog están basadas en vectores. Puedes usar filtros para crear tu propio estilo y destacar también.
- Mejore las imágenes de stock. A menos que sea un fotógrafo con mucho tiempo libre, en algún momento probablemente terminará usando imágenes de stock en su sitio web. En la mayoría de los casos, otros sitios también utilizarán las mismas imágenes. Puedes diferenciarte con el uso de filtros.
Si desea más opciones en lo que respecta a la personalización de imágenes en WordPress, los filtros son un primer paso importante. Sin embargo, también puede agregar un editor de imágenes básico a su tablero, eliminando por completo la necesidad de cualquier software independiente.
Cómo agregar filtros de imagen de WordPress a su sitio web usando complementos
Teniendo en cuenta lo populares que son los filtros de imágenes, es sorprendente que haya pocos complementos de WordPress en este nicho. De hecho, después de algunas investigaciones, encontramos solo una opción que nos sentimos cómodos recomendándole: Ultimate Image Filters :
Tenga en cuenta que este es un complemento premium, pero ofrece una experiencia casi perfecta para agregar filtros a sus imágenes. El complemento incluye más de 40 filtros únicos que puede agregar a cualquier imagen en su sitio. Además, puede personalizar la fuerza de cada filtro (es decir, controlar cuánto se ven afectadas sus imágenes), y funciona a la perfección con Divi para arrancar.
Características clave:
- Agregue más de 40 filtros de imagen a su galería de medios de WordPress.
- Guarde sus imágenes personalizadas como nuevos archivos adjuntos.
- Cambia entre filtros sin problemas.
Tampoco se necesita más configuración después de instalar el complemento. Simplemente haga clic en cualquier imagen en su biblioteca de medios de WordPress , luego, en el menú de la derecha, desplácese hacia abajo hasta llegar a la lista de filtros disponibles. Cada uno incluye una miniatura de vista previa del efecto, aunque a menos que esté trabajando en un monitor grande, puede obtener más beneficios al aplicar el efecto y ver los cambios. Independientemente, simplemente elija un filtro, modifique su fuerza y guarde la imagen actualizada si está satisfecho con los resultados:
También puede agregar filtros a sus imágenes desde el editor de WordPress . Simplemente haga clic en el botón Agregar medios , elija la imagen que desee y repita el proceso anterior:
Sin embargo, tenga en cuenta que no puede acceder a los filtros del complemento si intenta editar una imagen que ya ha agregado a una publicación. Primero deberá eliminarlo, agregar el filtro de su biblioteca de medios y colocar la nueva imagen en su lugar. Aparte de ese pequeño contratiempo, el proceso no podría ser más sencillo.
9 filtros de imagen de WordPress que puede agregar a sus sitios web (usando CSS)
Si prefiere no configurar complementos adicionales, especialmente uno con un precio adjunto, también puede usar algunos efectos CSS para lograr una apariencia filtrada similar. En el pasado, hemos hablado sobre varias formas de personalizar el CSS de su sitio web de WordPress . Los usuarios de Divi deberán dirigirse a la pestaña Divi > Opciones de tema en su panel de control de WordPress y buscar el campo CSS personalizado en la parte inferior de la página:
Aquí, puede pegar el código CSS que encontrará en cada sección (para los filtros que desea usar), guardar los cambios y listo.
1. Opacidad
Para este primer ejemplo, vamos a agregar un filtro de opacidad a una de sus imágenes. Piense en esto como una forma de hacer que sus imágenes sean transparentes. A menudo, usaría esto para reducir la prominencia de una imagen (por ejemplo, si es parte del fondo) o superponerla con otras imágenes. Este es el fragmento de CSS que deseará agregar al campo CSS personalizado :
|
01
02
03
04
05
|
.filter-opacity{filter: opacity(.7);-webkit-filter: opacity(.7);} |
Notarás que estamos creando una nueva clase CSS aquí, llamada filter-opacity . En el interior, hemos aplicado un filtro de opacidad con una fuerza de .7 (que se puede cambiar a cualquier valor entre cero y uno), y usamos tanto la propiedad de filtro como el filtro ‘WebKit’ . Esto es para que los navegadores que usan WebKit como su motor de renderizado CSS (como Safari en macOS) también reconozcan las instrucciones.
Ahora, para probar nuestro nuevo filtro, vamos a abrir una de nuestras páginas Divi y personalizar uno de los retratos de los miembros de nuestro equipo. Aquí está la imagen original:
Para aplicar el filtro, abra la página con Divi Builder y localice el módulo Imagen correspondiente. Luego haga clic en el botón Configuración del módulo :
Una vez que esté dentro, vaya a la pestaña Avanzado y busque el campo Clase CSS , luego escriba el nombre de su nueva clase. En este caso, es filter-opacity :
Puede nombrar las clases de su filtro de la forma que desee. Solo trata de convertirlos en algo que recordarás fácilmente para evitar confusiones. Una vez que guarde sus cambios, podrá ver los efectos del filtro que ha aplicado. Tenga en cuenta que este proceso será similar para cualquier otro filtro CSS que desee agregar. Para agregar filtros a sus imágenes, simplemente agregue la clase que desea a las imágenes que desea personalizar.
2. Sepia
Los filtros sepia ofrecen una excelente manera de agregar un aspecto ‘antiguo’ a sus imágenes, aunque debe aplicarlo de forma selectiva, ya que se convierte en un aspecto pasado de moda si se exagera. Esto aplica una neblina de color marrón rojizo sobre sus imágenes, haciéndolas parecer fotografías descoloridas. Este es el código que necesitará para agregar el filtro a su sitio web:
|
01
02
03
04
05
|
.filter-sepia{filter: sepia(100%);-webkit-filter: sepia(100%);} |
En este ejemplo, hemos decidido aplicar el filtro usando un porcentaje. Puede usar este o decimales (o ambos), aunque le recomendamos que se ciña a uno u otro para evitar confusiones. En este caso, el número uno equivale a un filtro con una fuerza del 100 %.
3. Saturar
Saturar una imagen es una forma excelente de animar los colores apagados y este filtro aumenta la intensidad de todos los colores de la imagen. Tome los amarillos en el ejemplo anterior, que ahora resaltan mucho más que antes. Aquí está el código que necesita agregar a su campo CSS personalizado :
|
01
02
03
04
05
|
.filter-saturate{filter: saturate(1);-webkit-filter: saturate(1);} |
En este caso, optamos por un valor de uno para saturar en exceso nuestro ejemplo, pero puede (por supuesto) ajustar los números como desee.
4. Invertir
Ahora algo un poco diferente: este filtro invierte todos los colores de su imagen. Por ejemplo, el negro se convierte en blanco, y así sucesivamente. No es un filtro que se ve a menudo en la fotografía, pero también sirve como una forma práctica de ofrecer accesibilidad visual a algunos visitantes. Este es el fragmento de código que deberá copiar:
|
01
02
03
04
05
|
.filter-invert{filter: invert(.8);-webkit-filter: invert(.8);} |
Un valor de uno, en este caso, daría como resultado una imagen totalmente invertida. Este es un filtro complicado de configurar, por lo que es posible que deba ajustar el valor hasta que encuentre una fuerza que le agrade.
5. Hue-Rotar
El filtro de rotación de tono es otra opción comodín. Si alguna vez ha utilizado una herramienta de edición de imágenes, es posible que esté familiarizado con las ruedas de colores. Funcionan mostrando todos los colores disponibles dentro de una rueda, que luego puede usar para seleccionar los colores y tonos que desea. Este filtro funciona con esta premisa, pero sin una representación visual. Veamos el código para que puedas tener una mejor idea de cómo funciona:
|
01
02
03
04
|
.filter-rotate{filter: hue-rotate( deg );} |
Puede reemplazar el valor de grados con cualquier número que vaya desde 0 grados hasta 360 grados . Lo admitimos, sin un gráfico que le indique qué color está eligiendo, los resultados podrían ser impredecibles. Es un filtro divertido de usar si desea aleatorizar los colores de sus imágenes, pero puede requerir algunos ajustes para obtener exactamente los tonos que desea.
6. Escala de grises
Ahora algo más tradicional: el filtro de escala de grises toma sus imágenes y reemplaza los colores con tonos de gris. Piense en ello como una forma rápida de convertir sus fotos en imágenes antiguas en blanco y negro. Aquí está el código que necesitarás:
|
01
02
03
04
05
|
.filter-greyscale{filter: grayscale(1);-webkit-filter: grayscale(1);} |
Establecer un valor de uno eliminará todos los demás colores de sus imágenes, mientras que los números más pequeños simplemente los amortiguarán. También notará que puede lograr un efecto similar con un valor de saturación bajo . Cualquiera que elija depende completamente de sus preferencias personales.
7. Contraste
El filtro de contraste será el que probablemente le resulte más familiar. Básicamente, hace que los blancos sean más blancos y los negros más oscuros, lo que le permite animar los colores desvaídos. Aquí está el CSS que necesita para usarlo en WordPress:
|
01
02
03
04
05
|
.filter-contrast{filter: contrast(1);-webkit-filter: contrast(1);} |
Como siempre, la fuerza del filtro depende del valor que escriba allí, así que siéntase libre de ajustarlo a su gusto.
8. Brillo
El filtro de brillo es muy sencillo. Le permite aclarar u oscurecer una imagen según el valor que ingrese en el código. Aquí está el fragmento de CSS base:
|
01
02
03
04
05
|
.filter-brightness{filter: brightness(1.5);-webkit-filter: brightness(.5);} |
En este caso, cualquier valor por encima de uno aumentará el brillo de la imagen y los números por debajo de uno la oscurecerán, así que tenlo en cuenta.
9. Desenfoque
Por último, pero no menos importante, tenemos el filtro de desenfoque . Este también es uno popular que está disponible en la mayoría de las aplicaciones de edición de imágenes. Esto aplica un aspecto ‘fuera de foco’ a sus imágenes, y podría usarse en un apuro para ofuscar información confidencial. Aquí está el CSS que necesita para implementarlo:
|
01
02
03
04
05
|
.filter-blur{filter: blur(5px);-webkit-filter: blur(5px);} |
En realidad, hay diferentes tipos de efectos de desenfoque disponibles, y el integrado en CSS es un desenfoque ‘gaussiano’ que desenfoca toda la imagen con una superposición suave.
Es aún más fácil si eres un usuario de Divi
Recientemente lanzamos una gran actualización de características de diseño que agregó filtros de color, efectos y modos de fusión para todas las imágenes, módulos, filas y secciones dentro de Divi. Entonces, para los usuarios de Divi, puede hacer todo lo anterior (y mucho más) sin necesidad de ningún código.
Conclusión
Los filtros de imágenes pueden tener muchos más usos de los que podría esperar, dado su uso en sitios como Instagram. Por ejemplo, puedes usar filtros para personalizar las imágenes que subes a WordPress o para diferenciar gráficos de stock. De cualquier manera, Divi facilita el uso de filtros de color, efectos y modos de fusión para todas las imágenes, módulos, filas y secciones de su sitio web.
Los usuarios que no son de Divi siempre pueden usar un complemento para agregar múltiples filtros de imagen a WordPress. No hay muchos que cumplan con nuestros estándares, aunque Ultimate Image Filters es una de las pocas buenas opciones. Por otro lado, el uso de CSS le permite tener mucho más control sobre sus filtros y cómo se ven. Requiere un poco de trabajo configurar nuevos filtros de imagen de WordPress, pero usar Divi lo hace más simple.
¿Tiene alguna pregunta sobre cómo agregar filtros de imagen de WordPress a su sitio web? ¡Hablemos de ellos en la sección de comentarios a continuación!
Imagen en miniatura del artículo de Diana Hlevnajk / shutterstock.com