WordPress es altamente personalizable, y una forma de mejorar el atractivo visual de su sitio web es agregando efectos de desplazamiento. Estas son pequeñas animaciones que se reproducen cuando un visitante pasa el mouse sobre un elemento determinado.
Estos son excelentes para captar la atención del lector mientras se desplaza por la página. Así, son ideales sobre elementos como botones o imágenes relacionadas con ventas o características especiales que quieras resaltar.
Hoy, demostraré cómo agregar animación flotante a cualquier elemento de WordPress con el complemento Hover Effects.
¿Por qué agregar efectos de desplazamiento a WordPress?
Los efectos de desplazamiento resaltan elementos importantes en una página como botones, pancartas y más. Más importante aún, proporcionan una señal clara de lo que se puede hacer clic en su sitio web, lo que los convierte en una excelente adición a las páginas abarrotadas.
Por supuesto, a veces un efecto de desplazamiento puede proporcionar detalles adicionales.
Por ejemplo, cuando pasa el mouse sobre un enlace en una página o publicación, la mayoría de los sitios web mostrarán la URL. Si bien esto no es llamativo, sigue siendo un ejemplo de un efecto de desplazamiento. Otro sería mostrar texto alternativo o un título en una imagen.
Por lo tanto, los efectos de desplazamiento son útiles ya sea que solo esté buscando bromas estéticas o si desea mostrar información importante.
Cómo agregar efectos de desplazamiento en WordPress
Paso 1: instalar efectos de desplazamiento
Si bien podría usar fácilmente CSS para agregar efectos de desplazamiento en WordPress, muchos principiantes pueden tener problemas con esto. En su lugar, recomiendo usar el complemento Hover Effects . Este complemento proporciona todo el código CSS que va a utilizar.
Por lo tanto, todo lo que necesita hacer es copiar la copia y pegarla en la sección CSS adicional en el bloque deseado. Es realmente simple de usar y le da acceso a cuarenta efectos de desplazamiento diferentes que se pueden usar en cualquier bloque o menú de WordPress.
Comencemos haciendo clic en Complementos y seleccionando la opción Agregar nuevo en el panel de administración de la izquierda.
Busque Efectos de desplazamiento en el cuadro de búsqueda disponible. Esto abrirá complementos adicionales que pueden resultarle útiles.
Desplácese hacia abajo hasta que encuentre el complemento Hover Effects y haga clic en el botón «Instalar ahora» y active el complemento para su uso.
Paso 2: Copie un efecto
Como dije, lo único que debe hacer es copiar y pegar el código CSS, lo cual es extremadamente fácil. El complemento agrega una página dedicada donde puede ver lo que hace cada efecto y copiar el código necesario.
En el panel de administración de la izquierda, haga clic en Wow-Company y seleccione la opción Hover Effects.
En la parte superior, verás algunas opciones. Actualmente se encuentra en la pestaña de ejemplos, los demás incluyen preguntas frecuentes, un enlace a los foros de soporte, un enlace a la página de calificación y su página de .
Solo necesita las pestañas Ejemplos y Preguntas frecuentes.
Aquí puede ver todos los estilos de desplazamiento. Hay tres estilos: transiciones 2D, transiciones de sombras y brillos y rizos. Todo lo que necesita hacer es pasar el mouse sobre el efecto para verlo en acción.
Y tenga en cuenta que estos efectos se pueden aplicar a cualquier bloque en Gutenberg. Haga clic en el efecto para copiar el CSS.
Nota: si planea usar múltiples efectos de desplazamiento, le recomiendo abrir esta página en una nueva pestaña. De esa manera, puede simplemente intercambiar pestañas para encontrar un nuevo efecto de desplazamiento para agregar. Es un gran ahorro de tiempo.
Paso 3: agregue efectos de desplazamiento a los bloques
Vaya a cualquier publicación o página de su sitio web a la que desee agregar un efecto de desplazamiento, o cree uno nuevo con fines de prueba. Una vez allí, haga clic en cualquier bloque en el editor y expanda la rueda de configuración.
Nota: este proceso es idéntico para los widgets en WordPress. Después de todo, todos los widgets son solo bloques.
Haga clic en Configuración avanzada.
Estas configuraciones incluyen atributo de título, ancla HTML y clases CSS adicionales. Pegue el efecto de desplazamiento en el cuadro de texto Clases de CSS adicionales.
No puede ver el efecto de desplazamiento en el editor. En su lugar, puede hacer clic en el botón «Vista previa» para verlo o guardar los cambios y verlo en una página en vivo. Nuevamente, estos efectos funcionan en cualquier bloque.
Por lo tanto, es el mismo proceso independientemente de si está agregando efectos de desplazamiento a una imagen o un botón. Solo recuerde que si tiene múltiples efectos de desplazamiento para un solo botón, debe separar cada línea CSS con una coma.
Paso 4: agregar efectos de desplazamiento a los menús
Estos efectos de botón no son exclusivos de los bloques en WordPress, también se pueden aplicar a los menús para ayudarlos a destacar más. Sin embargo, de forma predeterminada, las clases CSS no están habilitadas, por lo que primero debemos activarlas.
Haga clic en Apariencia y seleccione la opción Menús.
Haga clic en Opciones de pantalla en la esquina superior derecha.
Marque la casilla Clases de CSS para habilitar CSS en los elementos del menú.
Esto le permitirá agregar CSS personalizado a cualquier elemento del menú, pero la clave es que es para elementos individuales. No puede agregar el efecto a todos los elementos a la vez. Por lo tanto, si ese era su objetivo, deberá agregar el efecto de desplazamiento a cada elemento del menú individualmente.
Expanda cualquier elemento del menú y pegue el efecto de desplazamiento en el cuadro Clases de CSS.
Guarde los cambios y su menú ahora tendrá el efecto de desplazamiento. Felicitaciones por configurar el complemento Hover Effects en WordPress.
¿Los efectos de desplazamiento afectan el rendimiento del sitio?
En la mayoría de los casos, los efectos de desplazamiento no tendrán ningún impacto en el rendimiento del sitio. Sin embargo, si agrega animaciones de desplazamiento a elementos específicos, a veces puede ralentizar las páginas para el usuario.
Por ejemplo, supongamos que tiene una imagen muy grande. Si decidiste agregarle un efecto de desplazamiento giratorio, bueno, eso puede complicarse. No se recomienda mover un archivo grande como ese.
Y, francamente, es un mal diseño. Otra cosa a considerar son los usuarios móviles.
Si bien los teléfonos inteligentes se han vuelto muy poderosos, no todos usan el último modelo. Estas animaciones pueden causar problemas en dispositivos que no están a la altura. Es por eso que muchos sitios web deshabilitan los efectos de desplazamiento para dispositivos móviles.
No exagere sus efectos de desplazamiento
Agregar animación CSS al pasar el mouse en WordPress es una excelente manera de agregar un poco de dinamismo a su sitio web. Sin embargo, al igual que existe demasiado brillo en la vida real, puede tener demasiados efectos de animación.
Para algunos visitantes, esto puede parecer cursi o amateur. Solo use algunos efectos e intente usarlos en el mismo tipo de objetos. Lo más importante es tratar de evitar los más elegantes. Nadie quiere ver un botón de «Comprar ahora» hacer un giro de barril.
¿Qué tipo de animaciones flotantes utiliza en su sitio web? ¿A qué elementos de la página agregas efectos de desplazamiento?