Hace algunas semanas veíamos cómo implementar en tu web distintos efectos en imágenes con CSS, incluyendo en cada uno de ellos el código necesario para implementarlos. Pues bien, si tu web está en WordPress estás de enhorabuena: no tienes ni que preocuparte por el código, porque hay un plugin que lo hará por ti.
En este post vamos a ver cómo implementar efectos CSS avanzados en imágenes de la forma más fácil que se te pueda ocurrir: por medio de shortcodes.
Tabla de contenidos
Implementar efectos CSS en imágenes en WordPress con un plugin
Hay varios plugins que dan esta funcionalidad, todos ellos con una versión gratuita, limitada, y una versión premium con bastantes más opciones.
Aunque no los uso en mi día a día (yo siempre prefiero establecer los estilos de forma manual, escribiendo directamente el CSS necesario) he probado varios para poder presentarte aquí el/los más recomendable/s, y he de decir que la mayoría han sido una decepción.
Y ojo, porque estoy hablando de las versiones gratuitas, de las premium no he probado ninguna. El caso es que en la mayoría la selección de los efectos se hace engorrosa y difícil.
El plugin SB Image Hover Effects
Sin embargo sí he encontrado una pequeña joyita para animar imágenes con efectos CSS3: SB Image Hover Effects.
Tiene pocas instalaciones activas (no llegan a mil en este momento) y el tipo de efecto es útil sólo para determinadas cosas (son imágenes que presentan textos, los verás a continuación) pero tiene muchas valoraciones para el número de instalaciones y todas de cinco estrellas. Y no me extraña, porque de verdad merece la pena probarlo.
Al instalarlo tendrás disponible una nueva sección en el menú de administración de WordPress, Image Hover, con tres submenús: Image Hover, General Effects, Square Effects y Other Plugins.
Efectos generales y Efectos cuadrados son (lo puedes ver más abajo, en el vídeo) un catálogo de los treinta y tres efectos diferentes que puedes implementar con el plugin, quince de los cuales están disponibles en la versión gratuita. Y desde luego merece la pena darle un repaso antes de ponerse manos a la obra para tener claro lo que vas a poder hacer.
En cuanto al uso es súper sencillo: tienes una pantalla de creación de los efectos con tres zonas: configuración, subida de archivos y previsualización. En la zona de configuración tienes las pestañas General, Tipografía (para los textos), CSS Personalizado y una más donde puedes consultar un videotutorial.
El procedimiento no puede ser más fácil: subes una imagen en la zona de subida de archivos, vas ajustando cada una de las opciones hasta que tienes el efecto deseado (que puedes ir viendo en la parte de abajo, en la zona de previsualización) y ya está: al guardar te proporciona un shortcode que puedes usar en cualquier parte de tu contenido.
Vídeo: implementar efectos CSS3 en imágenes en WordPress
Como estas cosas merece la pena verlas, mejor te he hecho un vídeo.
