Utilidades

Como añadir efecto hover a tus enlaces con el Plugin Hover Effects

03/09/2018

Si quieres personalizar los enlaces de tu página web y añadirles alguna animación, te recomiendo que pruebes el plugin Hover Effects – easily create any hover effect. Es un plugin que nos ofrece 39 efectos hover listos para usar en nuestros enlaces.

Para instalarlo nos dirigimos al repositorio de plugins de WordPress y en el buscador ponemos “Hover Effects Wow-Company” lo instalamos y activamos.

En la barra de menú del panel de administración localiza el item WoW Company > Hover Effects
Esta pantalla nos muestra todos los efectos que podemos utilizar, solo tienes que poner el puntero sobre cada uno de ellos y ver cuál es el que más te gusta. Una vez decidido el efecto haz click sobre él. El plugin nos copiará al portapapeles la clase, que será lo que necesitemos para animar el enlace.

Si queremos aplicar el efecto en los enlaces del menú
Dirígete a Apariencia > Menús, en Estructura del Menú selecciona el elemento de menú al que agregar el efecto y pega la clase en la opción 'Clases de CSS'.
Si no ves esta opción haz clic en 'Opciones de pantalla' (arriba a la derecha de la pantalla) y asegúrate de que esté marcada la casilla 'Clases CSS'

Si quieres aplicar la clase a un enlace dentro del contenido o de un post
Abre la página o post en la que quieras aplicar el efecto y localiza el enlace. Cambia el editor de texto a modo de modo Visual a modo HTML. Al enlace debemos darle el atributo class=”” y pegar entre las comillas la clase del efecto hover que hemos copiado. Guardamos y nos dirigimos a la página o entrada para ver el resultado.

Si tienes algunos conocimientos sobre el código WordPress puedes hacer el proceso algo más automático a partir de una función que nos muestre las clases de los efectos en el editor de texto, de esta manera no tendrías que copiar y pegar el código de la clase si no aplicarla directamente al elemento a animar. Si quieres saber cómo hacerlo te recomiendo que leas el post Añadir formatos al editor de texto de WordPress sin Plugin

Este es un plugin muy sencillo de usar que nos va a permitir personalizar nuestros enlaces de una manera rápida y fácil. ¿Conoces algún otro plugin para efectos hover? ¿Te ha resultado útil este post? Dejanos tu comentario y comparte con nosotros tus dudas y experiencias con WordPress.

¿Nos ayudas a mejorar la calidad del blog?
Déjanos una valoración sobre este post para poder seguir mejorando
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)
Cargando...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


* Campo obligatorio.