Cómo agregar efectos de desplazamiento de imagen en WordPress (paso a paso)

Sabemos cuánto esfuerzo se dedica a elegir las imágenes perfectas para tu sitio web. Pero a veces, incluso las mejores fotos pueden sentirse un poco estáticas, sin captar la atención completa de un visitante.

Agregar una animación simple al pasar el cursor puede ser el pequeño detalle que haga que tu sitio se sienta más profesional y atractivo. Muchos creen que esto requiere código personalizado, pero hemos encontrado varias formas sencillas de hacerlo en nuestros propios proyectos sin necesidad de codificar.

En este artículo, te guiaremos a través de cinco métodos sencillos, paso a paso, para agregar hermosos efectos de desplazamiento en imágenes en WordPress. Cubriremos todo, desde desvanecimientos simples hasta cajas giratorias interactivas.

¿Por qué usar efectos de desplazamiento en imágenes en WordPress?

Los efectos de desplazamiento en imágenes te permiten agregar animaciones cortas a tus imágenes, como zooms, desvanecimientos, pop-ups y más. Esto hará que tus imágenes sean más interesantes y atractivas, incluso si una página tiene muchas imágenes.

También puedes usar efectos de desplazamiento para atraer la atención del visitante al contenido más importante. Por ejemplo, podrías usar animaciones CSS para resaltar el logotipo de tu sitio web o la llamada a la acción.

Sumerjámonos en 5 formas amigables para principiantes de agregar diferentes efectos de desplazamiento en imágenes a tu sitio de WordPress. Simplemente usa los enlaces rápidos a continuación para saltar directamente al efecto que deseas usar:

• Opción 1: Agregar efectos de caja giratoria en WordPress (Rápido y fácil)
• Opción 2: Agregar efectos de zoom y magnificación de imágenes (Mejor para tiendas en línea)
• Opción 3: Desvanecer imágenes al pasar el mouse en WordPress (Mejor para el rendimiento)
• Opción 4: Agregar múltiples efectos de desplazamiento en imágenes a WordPress (El más personalizable)
• Opción 5: Agregar efectos de ventana emergente de desplazamiento en imágenes usando un editor CSS visual
• Preguntas Frecuentes Sobre Efectos de Imagen al Pasar el Mouse
• Aprende Más Formas de Usar y Administrar Imágenes en WordPress

Opción 1: Agregar efectos de caja giratoria en WordPress (Rápido y fácil)

La forma más fácil de agregar efectos al pasar el mouse en WordPress es usar cajas de volteo (flipboxes). Una caja de volteo es simplemente una caja que se voltea cuando pasas el mouse sobre ella. Esto te permite mostrar una imagen, texto o llamada a la acción diferente al pasar el mouse.

Si eres un fotógrafo, podrías mostrar una foto en un lado de la caja de volteo y información sobre el modelo de cámara o la resolución en el otro lado.

Si estás vendiendo arte digital o gráficos en línea, podrías incluso agregar un botón en el que los visitantes puedan hacer clic para comprar esa foto.

La forma más fácil de crear cajas de volteo es usando Flipbox – Awesomes Flip Boxes Image Overlay. Este plugin gratuito viene con varios estilos diferentes de cajas de volteo que presentan una combinación de imágenes, texto y botones de llamada a la acción.

Lo primero que necesitarás hacer es instalar y activar el plugin Flipbox. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté instalado y activado, puedes crear tu primera caja de volteo yendo a Flip Box » Crear Nuevo.

Esto muestra todas las diferentes plantillas que puedes usar.

Para elegir un diseño, haz clic en su botón 'Crear Estilo'.

En la ventana emergente que aparece, escribe un nombre para el diseño del flipbox. Esto es solo para tu referencia, así que puedes usar lo que quieras.

También puedes elegir qué diseño quieres usar haciendo clic en el 1.º, 2.º o 3.º.

Después de elegir un estilo de flipbox, puedes cambiar las fuentes, el relleno y los márgenes.

Luego puedes agregar texto, imágenes e íconos a ambos lados del flipbox.

Cuando estés satisfecho con cómo se ve el flipbox, es posible que desees agregar más cajas haciendo clic en el '+' en la sección 'Agregar nuevas cajas de flip'.

Esto te permite crear múltiples flipboxes con el mismo estilo y luego organizarlos en columnas y filas.

Por ejemplo, podrías crear una caja giratoria para cada plan de precios.

Los compradores podrán pasar el cursor sobre un plan para ver el costo.

Cuando estés satisfecho con las animaciones al pasar el cursor, puedes añadirlo a cualquier página, publicación o área lista para widgets usando un shortcode que el plugin proporciona automáticamente.

Para obtener instrucciones paso a paso, consulta nuestra guía sobre cómo crear superposiciones y efectos al pasar el cursor en cajas giratorias.

Opción 2: Agregar efectos de zoom y magnificación de imágenes (Mejor para tiendas en línea)

Los efectos de zoom permiten a los usuarios ver detalles que normalmente no serían visibles. Si tienes una tienda de comercio electrónico o un mercado en línea, esto permite a los compradores explorar un producto con más detalle, lo que puede generar más ventas.

Los efectos de zoom también pueden añadir más interacción y participación a tu sitio.

Por ejemplo, podrías crear rompecabezas y juegos sencillos que desafíen a los visitantes a detectar pequeños detalles en tus imágenes. Esto puede mantenerlos en tu sitio por más tiempo, lo que aumentará tus visitas a la página y disminuirá la tasa de rebote.

El mejor plugin de WordPress para añadir efectos de zoom y magnificación de imágenes es WP Image Zoom.

Este plugin de efectos de desplazamiento te permite personalizar cómo se verá y actuará el efecto de zoom en todo tu sitio web de WordPress. Luego puedes habilitar el zoom para cualquier imagen.

Usaremos la versión gratuita en esta guía, pero si deseas más opciones de personalización, podrías considerar WP Image Zoom Pro. Consulta nuestra reseña de WP Image Zoom para más detalles.

Primero, necesitas instalar y activar el plugin WP Image Zoom . Para más detalles, por favor consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, debes dirigirte a la página WP Image Zoom » Zoom Settings desde la barra lateral de administración de WordPress. Si no está seleccionada, haz clic en 'Zoom Settings'.

Para empezar, puedes elegir entre algunas formas de lente diferentes.

También puedes seleccionar un tipo de cursor, establecer un efecto de animación, habilitar el zoom al pasar el ratón o al hacer clic, y definir un nivel de zoom.

Cuando estés satisfecho con la configuración del zoom, puedes añadir el efecto a cualquier imagen. En el editor de bloques de Gutenberg, haz clic para seleccionar la imagen a la que deseas añadir un efecto de zoom. O, carga una imagen primero a WordPress.

En el menú de la derecha, selecciona el botón ‘con Zoom’.

Si estás usando WooCommerce, entonces puedes habilitar el zoom en todas las imágenes de tus productos en la configuración del plugin. Esto es ideal si quieres habilitar el zoom en toda tu tienda en línea sin tener que actualizar cada producto individualmente.

En la pestaña ‘Configuración General’, marca la casilla ‘Habilitar el zoom…’, y los clientes podrán magnificar cualquier imagen de producto.

Para más detalles, consulta nuestra guía sobre cómo agregar zoom de magnificación para imágenes en WordPress.

Opción 3: Desvanecer imágenes al pasar el mouse en WordPress (Mejor para el rendimiento)

Otra opción es una animación simple de fundido, donde tus imágenes aparecen o desaparecen lentamente cuando un visitante pasa el cursor sobre ellas. Esta es una excelente manera de resaltar las imágenes mientras el usuario se mueve por la página.

Puedes usar este efecto para guiar al visitante a través de tu contenido o incluso añadir un elemento narrativo a una publicación.

A diferencia de algunas animaciones complejas, el efecto de desvanecimiento es muy sutil. No afectará negativamente la experiencia de lectura ni interferirá con tus esfuerzos de optimización de imágenes.

Esto lo convierte en una opción perfecta para páginas que tienen muchas fotos de alta resolución.

La forma más fácil de añadir este efecto es usando el plugin gratuito WPCode. Te permite añadir CSS personalizado sin tener que editar los archivos de tu tema directamente, lo cual es mucho más seguro.

Aquí en WPBeginner, usamos WPCode para administrar todos los fragmentos personalizados que potencian nuestro sitio. Es una herramienta confiable que recomendamos para añadir cualquier tipo de código personalizado. Para más detalles, puedes leer nuestra reseña completa de WPCode.

Para obtener instrucciones completas sobre cómo usar WPCode para este efecto, consulta nuestra guía sobre cómo desvanecer imágenes al pasar el ratón en WordPress.

Opción 4: Agregar múltiples efectos de desplazamiento en imágenes a WordPress (El más personalizable)

Es posible que desees usar múltiples efectos de hover de imágenes diferentes en tu sitio web. Por ejemplo, si tienes muchas galerías de imágenes, entonces podrías querer animar estas fotos de maneras diferentes e interesantes.

La mejor manera de agregar múltiples efectos de desplazamiento al pasar el cursor en WordPress es usando Image Hover Effects Ultimate. Este plugin gratuito admite una amplia gama de efectos que puedes personalizar para que se ajusten a tus necesidades.

Lo primero que debes hacer es instalar y activar el plugin Image Hover Effects Ultimate. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, selecciona 'Image Hover' desde el panel de WordPress. Ahora verás todos los diferentes tipos de efectos de desplazamiento que puedes usar.

Para esta guía, seleccionaremos 'Caption Effects', que agrega texto animado sobre una imagen.

Puedes crear cualquier tipo de efecto de desplazamiento que desees, aunque las opciones que veas pueden variar.

Después de hacer clic en 'Caption Effects', verás todos los diferentes estilos que puedes usar.

Simplemente pasa el cursor sobre un estilo para ver una vista previa de cómo se verá la animación.

Cuando encuentres un estilo que te guste, haz clic en su botón 'Create Style'.

Esto abre una ventana emergente donde puedes elegir el diseño exacto que deseas usar. Simplemente haz clic en el 1º, 2º o 3º.

Hecho esto, escribe un título en el campo 'Name'. Esto es solo para tu referencia, por lo que puedes usar cualquier cosa que te ayude a identificar la imagen animada en tu panel de WordPress.

Después de eso, haz clic en 'Save'.

Esto te lleva a una pantalla donde puedes personalizar el efecto de desplazamiento. Esto incluye cambiar el ancho y alto del contenido, aumentar el relleno y agregar una sombra de caja.

A medida que realices cambios, la vista previa en vivo se actualizará automáticamente, para que puedas probar diferentes configuraciones y ver qué se ve mejor.

Para algunos efectos de desplazamiento, puedes cambiar la dirección del efecto.

Por ejemplo, en la siguiente imagen, estamos cambiando la dirección del efecto de ‘persianas’ para que vaya hacia la derecha.

También puedes hacer que el efecto sea más rápido o más lento arrastrando el control deslizante ‘Tiempo de Efecto’. Si usas un número mayor, el efecto durará más. Si haces el número más pequeño, el efecto será más rápido y corto.

Si tienes un número específico en mente, puedes escribirlo en el cuadro junto al control deslizante ‘Tiempo de Efecto’.

Cuando estés satisfecho con la configuración del efecto, es hora de agregar contenido.

Para hacer esto, coloca el cursor sobre la sección ‘Vista previa’ y haz clic en el botón ‘Editar’ cuando aparezca.

Esto abre una ventana emergente donde puedes escribir un título y una breve descripción.

Este es el contenido que aparecerá cuando un visitante coloque el cursor sobre la imagen.

Después de eso, puedes reemplazar la imagen predeterminada con tu propia foto.

Simplemente coloca el cursor sobre la foto de marcador de posición y luego haz clic en ‘Elegir Imagen’ cuando aparezca.

Ahora puedes elegir una imagen de la biblioteca de medios de WordPress o subir un nuevo archivo desde tu computadora.

A veces, puedes usar efectos de desplazamiento (hover) para enviar a las personas a otras áreas de tu blog de WordPress o sitio web. Por ejemplo, si tienes una boutique en línea, podrías agregar un enlace al producto que se muestra en la imagen.

Puedes hacer esto agregando un botón de llamada a la acción (CTA), que aparecerá debajo de la descripción corta.

Para empezar, agrega la URL en el campo 'Enlace'.

Luego, agrega tu mensaje escribiendo en el campo 'Texto del botón'.

Cuando estés satisfecho con la información que ingresaste, haz clic en 'Enviar'.

Ahora que has agregado algo de texto, es una buena idea hacer clic en la pestaña 'Tipografía'.

Aquí, puedes cambiar el tamaño de fuente, agregar una sombra de texto, hacer los márgenes más grandes o más pequeños, y mucho más.

Si estás usando un botón de CTA, asegúrate de hacer clic para expandir la sección 'Configuración del botón'.

Aquí, puedes cambiar cómo se ve el botón en su estado predeterminado y en 'hover' (desplazamiento), que es cómo se ve cuando el visitante pasa el cursor sobre él. También puedes cambiar la alineación del botón.

La mayoría de estas configuraciones son sencillas, por lo que vale la pena revisarlas para ver qué diferentes tipos de efectos puedes crear.

Cuando estés satisfecho con cómo se ve la vista previa, haz clic en 'Guardar' para almacenar tus cambios.

¿Quieres crear una fila o columna de imágenes animadas?

Por ejemplo, podrías usar efectos de desplazamiento sobre imágenes para anunciar las mejores características de tu producto. En la siguiente imagen, el visitante puede pasar el cursor sobre cada foto para leer sobre una característica diferente.

¿Quieres crear una fila o galería completa de estas imágenes animadas? No hay problema. Para agregar otra, simplemente desplázate hacia arriba hasta la sección 'Agregar nuevo desplazamiento sobre imagen'.

Aquí, haz clic en el botón '+'.

Esto abre una ventana emergente donde puedes crear un nuevo efecto de desplazamiento sobre imagen, siguiendo el mismo proceso descrito anteriormente.

Cuando estés satisfecho con la configuración del efecto, haz clic en el botón 'Enviar' para guardar tus cambios.

Para crear más efectos de desplazamiento, simplemente repite el mismo proceso descrito anteriormente.

Cuando estés satisfecho con la configuración de los efectos, desplázate hasta el cuadro 'Shortcode'. Puedes agregar este efecto de desplazamiento a cualquier página o publicación copiando y pegando este código.

Para obtener más información sobre cómo colocar el shortcode, consulta nuestra guía sobre cómo agregar un shortcode en WordPress.

Opción 5: Agregar efectos de ventana emergente de desplazamiento en imágenes usando un editor CSS visual

Muchos de los complementos anteriores te permiten crear imágenes animadas avanzadas, como cajas giratorias, y luego colocarlas en una página usando shortcode. Sin embargo, a veces, es posible que desees agregar un efecto de desplazamiento a una imagen que ya está en la página.

En este caso, puedes usar un complemento de CSS personalizado de WordPress. Esto te permite hacer cambios visuales en tus imágenes sin codificar, y tampoco tienes que crear efectos de desplazamiento por separado en el panel de WordPress.

Aquí, recomendamos usar CSS Hero. Este complemento te permite editar casi todos los estilos CSS de tu sitio de WordPress usando un editor visual. También viene con efectos de desplazamiento incorporados que puedes aplicar a las imágenes con solo hacer clic en un botón.

Lo primero que necesitas hacer es instalar y activar el plugin CSS Hero. Para más detalles sobre cómo instalar un plugin, consulta nuestra guía sobre cómo instalar un plugin de WordPress.

Una vez que el plugin esté instalado, deberás hacer clic en el botón ‘Proceed to Product Activation’ (Continuar a la activación del producto).

Esto te llevará al sitio web de CSS Hero, donde podrás iniciar sesión en tu cuenta y obtener una clave de licencia. Simplemente sigue las instrucciones en pantalla y serás redirigido de vuelta a tu sitio en unos pocos clics.

Después de eso, abre la página o publicación que tiene la imagen que deseas animar. Luego, haz clic en ‘CSS Hero’ en la barra de administración de WordPress.

Esto abrirá esa página o publicación en el editor de CSS Hero.

Aquí, al hacer clic en cualquier pieza de contenido, se abrirá un panel con todas las configuraciones que puedes usar para personalizar ese contenido. Dicho esto, simplemente haz clic para seleccionar cualquier imagen.

En el menú de la izquierda, selecciona la pestaña ‘Snippets’ (Fragmentos).

Luego, haz clic en ‘Efectos de desplazamiento’ (Hover-Effects). Ahora verás todos los diferentes efectos CSS.

Para previsualizar un efecto, simplemente pasa el cursor sobre su botón azul en el menú de la izquierda.

Cuando encuentres un efecto que quieras usar, simplemente haz clic en ‘Aplicar’.

Importante: Por defecto, CSS Hero aplicará este efecto de pasar el cursor a cada imagen de la página. Esto es genial para crear un estilo uniforme, pero si solo deseas animar una imagen específica, entonces uno de los otros métodos del plugin en esta guía podría ser más adecuado.

Para que este cambio sea en vivo, haz clic en el botón ‘Guardar y publicar’ (Save & Publish).

Preguntas Frecuentes Sobre Efectos de Imagen al Pasar el Mouse

Habiendo ayudado a miles de usuarios de WordPress, hemos escuchado casi todas las preguntas sobre cómo agregar elementos interactivos a un sitio web. Aquí están algunas de las más comunes que recibimos sobre los efectos de desplazamiento de imágenes.

¿Funcionan los efectos de desplazamiento de imágenes en dispositivos móviles?

Los efectos de desplazamiento están diseñados para cursores de ratón, por lo que no funcionan en dispositivos táctiles como teléfonos inteligentes y tabletas. En móvil, la imagen normalmente solo mostrará su estado predeterminado sin ninguna animación.

Algunos plugins ofrecen opciones de respaldo, como activar una animación al primer toque. Debido a esto, siempre recomendamos revisar tus páginas en un teléfono inteligente o tableta para ver exactamente cómo aparecerán tus imágenes a los visitantes móviles.

¡Esto asegura una gran experiencia para todos, sin importar el dispositivo que estén usando! 👍

¿Agregar efectos de desplazamiento de imágenes ralentizará mi sitio web?

La mayoría de los efectos de desplazamiento modernos se crean usando CSS, que es muy ligero y eficiente. Al usar un plugin de calidad, estos efectos no deberían tener un impacto notable en la velocidad o el rendimiento de tu sitio web.

¿Puedo agregar efectos de desplazamiento de imágenes sin un plugin?

Sí, es posible agregar efectos de desplazamiento de imágenes escribiendo tu propio código CSS personalizado. Sin embargo, este método requiere conocimientos técnicos e implica editar los archivos de tu tema, lo que puede ser arriesgado para principiantes.

Usar un plugin es el método más seguro y fácil para la mayoría de los usuarios, ya que se encarga de todo el código por ti.

Aprende Más Formas de Usar y Administrar Imágenes en WordPress

Los efectos de desplazamiento de imágenes no son la única forma de agregar más interés visual a tu sitio web. Aquí tienes otros tutoriales que puedes leer sobre el uso de imágenes en WordPress:

• Cómo crear imágenes interactivas en WordPress
• Cómo agrandar imágenes al hacer clic en WordPress (3 métodos fáciles)
• Cómo mostrar fotos de antes y después en WordPress (con efecto de deslizamiento)
• Cómo agregar una galería en WordPress con efecto Lightbox
• Cómo agregar filtros de fotos al estilo de Instagram en WordPress (paso a paso)
• Cómo usar IA para generar imágenes en WordPress
• Cómo agregar GIFs animados en WordPress (la forma correcta)

Esperamos que este artículo te haya ayudado a aprender cómo agregar efectos de desplazamiento de imágenes en WordPress. También te puede interesar ver nuestras selecciones expertas de los mejores plugins de slider para WordPress y nuestra lista de fuentes de imágenes gratuitas de dominio público.

Si te gustó este artículo, suscríbete a nuestro canal de YouTube para obtener tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.