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.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
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.
Mil gracias por tus aclaraciones. No soy profesional pero tengo una web con wordpress y estaba intentando hacer efectos que veo por ahí en otras web y quería imitarlos. Por ahora sólo se trabajar con el constructor visual y no se como poner los short codes, pero bueno, poco a poco.
De nuevo darte las gracias por tu ayuda y claridad en las explicaciones.
Buenas tardes, buena explicación. Quisiera saber, es que quiero que al dar click sobre el link, cargue la página en el mismo marco o pestaña mas no que se abra en una nueba pagina, saben como hacerlo?. muchas gracias.
Buenas tardes, existe algún plugin que realice este efecto pero para las imágenes de los productos de Woocommerce? Gracias
Buenos días, Enrique
He estado mirando tus tutoriales de youtube porque estoy creando la web de mi negocio y me gustaría lanzarte una consulta.
Necesito implementar un plugin para ver el antes y después de las fotos que realizo, te mando una web que lo tiene implementado como ejemplo, y desconozco cual es el plugin que tengo que usar. ¿Tú lo conoces? Sería de gran ayuda para mi negocio.
GRacias de antemano.
Hola Mar
Puedes hacer esto utilizando algunos add-ons para maquetadores visuales. Si usas Visual Composer puedes hacerlo con el Super Bundle for WPBakery Page Builder. Si por el contrario usas Elementor puedes hacerlo con el add-on Elementor Extras.
Un saludo
amigo.. aparece como un plugin cerrado… que pena.. saludos
Me parece un pluggin muy interesante pero ¿Habría alguna manera de que el texto de las imágenes fueran H3?
Un saludo y gracias de antemano
tengo una consulta… a donde se guardan los botones ya creados? porque no me salen, directamente me lleva a crear uno nuevo