Cómo agregar un efecto de desplazamiento de imagen en WordPress (paso a paso)
¿Se pregunta cómo agregar efectos de desplazamiento de imagen en WordPress?
Los efectos de desplazamiento de la imagen pueden hacer que su sitio web sea más interactivo y atractivo. Esto crea una mejor primera impresión y mejora el tiempo que pasa en el sitio.
En este artículo, le mostraremos paso a paso cómo agregar efectos de desplazamiento de imagen en WordPress.
¿Qué es un efecto de desplazamiento de imagen?
Los efectos de desplazamiento de imagen le permiten agregar elementos interactivos a imágenes estáticas, como animaciones, efectos de zoom, ventanas emergentes y más.
Por ejemplo, puede cambiar la imagen para mostrar su precio o un enlace a su cartera.
El desplazamiento de la imagen también le brinda una forma creativa de mostrar sus fotos, galerías y miniaturas.
Las imágenes interactivas y los elementos flotantes pueden ayudar a su sitio web de varias maneras:
- Mejore el tiempo que sus visitantes pasan en su sitio web
- Brindarle formas creativas de presentar contenido a sus visitantes.
- Informe a sus usuarios de que se puede hacer clic en los elementos del sitio web
Cómo crear un efecto de desplazamiento de imagen en WordPress
La mejor manera de agregar efectos de desplazamiento de imagen a su sitio de WordPress es usar un complemento de WordPress.
Con los complementos, no tiene que dedicar tiempo a editar, formatear y agregar CSS para crear efectos de imagen. Simplemente funciona.
Puede usar varios complementos para crear animaciones y efectos de desplazamiento de imagen únicos.
En este tutorial, le mostraremos cuatro formas diferentes de agregar el efecto de desplazamiento que desea.
1. Agregue el efecto Flipbox de desplazamiento de imagen en WordPress
Un cuadro dinámico es un cuadro que se voltea cuando se pasa el mouse sobre él.
Puede agregar esta animación a la imagen para mostrar el texto e incluso cambiar la imagen al pasar el mouse.
Puede controlar cómo se voltea la imagen y el diseño de la imagen en los lados.
Si eres fotógrafo, puedes usarlo para mostrar tu trabajo y separar tu portafolio.
La forma más fácil de agregar un efecto de cuadro de imagen es usar un complemento de WordPress. Los complementos le permiten crear y personalizar rápidamente estos efectos.
Recomendamos usar Flipbox – Awesomes Flip Boxes Image Overlay plugin. Es el mejor cuadro de rollover y complemento de desplazamiento de imagen para WordPress.
Este complemento le permite agregar fácilmente efectos de agrupamiento personalizados a sus imágenes de WordPress.
Viene con docenas de diferentes efectos de animación y plantillas prediseñadas. Incluso puede controlar los colores y agregar su propio CSS personalizado.
Para obtener más detalles, consulte nuestra guía sobre cómo crear superposiciones de cuadros dinámicos y desplazamientos en WordPress.
2. Agregue efectos de ampliación y zoom de imagen en WordPress
Los efectos de zoom de imagen permiten a los usuarios ver detalles que no pueden ver en imágenes de tamaño normal.
Este es un gran efecto para tutoriales de productos e imágenes con un alto nivel de detalle.
También puede usarlo en su tienda en línea para agregar un efecto de zoom similar al de Amazon.
La forma más fácil de agregar zoom de imagen y efectos de ampliación a sus imágenes es usar un complemento de WordPress.
Recomendamos usar el complemento WP Image Zoom. Este complemento le permite agregar fácilmente efectos de zoom y ampliación a sus imágenes.
También está equipado con funciones que le permiten elegir la forma de la lente de zoom, el nivel de zoom y más.
Para obtener más detalles, consulte nuestra guía sobre cómo agregar ampliación a las imágenes en WordPress.
3. Agregue efectos de animación de imagen en WordPress
Puede agregar varios efectos de desplazamiento adicionales a WordPress.
Por ejemplo, tiene galerías de imágenes animadas, imágenes de caja de luz, imágenes de comparación, superposiciones de texto y más.
Para agregar tales efectos de desplazamiento, recomendamos usar el complemento Image Hover Effects Ultimate.
El complemento es muy liviano, por lo que no afectará el rendimiento de su sitio web ni la velocidad de carga. También es fácil de usar. Puede agregar efectos de imagen únicos con solo unos pocos clics.
Lo primero que debe hacer es instalar y activar el complemento Image Hover Effects Ultimate. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar complementos de WordPress.
Después de instalar y activar el complemento, debe hacer clic en Image Hover en el administrador de WordPress. Aparecen ocho efectos de desplazamiento de imagen diferentes entre los que puede elegir.
En este tutorial, usaremos el efecto Efecto de título. Esto agrega texto animado sobre la imagen al pasar el mouse.
Primero, haga clic en el cuadro “Efectos de subtítulos”. Esto abrirá un menú con diferentes opciones de animación para que elijas.
Una vez que encuentre un efecto de imagen que le guste, haga clic en Crear estilo.
En el cuadro emergente, asigne un nombre al efecto de desplazamiento y elija un diseño. El número de diseño que elija coincide con la secuencia ordenada de imágenes.
Recuerda hacer clic en “Guardar”.
En la siguiente pantalla, tendrá varias opciones para personalizar el efecto de desplazamiento.
Sin embargo, mantendremos las opciones de animación predeterminadas.
Si realiza cambios, los verá aparecer en el cuadro Vista previa.
Para cambiar la imagen predeterminada, coloque el cursor sobre la imagen y haga clic en la opción Editar.
En esta ventana emergente, puede cambiar el título y la descripción que se muestran al pasar el mouse.
Para cargar su imagen, haga clic en el cuadro debajo del encabezado “Imágenes” y cargue o seleccione una imagen de su biblioteca de medios.
También puede agregar texto de enlace y botón si desea que su imagen lleve a los usuarios a otra página de su sitio web.
Cuando haya terminado, haga clic en Enviar.
Para agregar una imagen a su sitio web, copie el código corto en el cuadro “Código corto”.
Luego, abra cualquier página, publicación o widget donde desee que aparezca la imagen y pegue el código abreviado.
Asegúrese de hacer clic en Publicar o Actualizar para guardar los cambios y hacer que el efecto de desplazamiento de la imagen surta efecto.
Los complementos anteriores lo ayudarán a agregar flip boxes, efectos de desplazamiento, animaciones y más.
¿Qué sucede si desea agregar diferentes efectos de desplazamiento de imagen que no están cubiertos por los complementos anteriores?
La mejor manera es usar un complemento CSS personalizado de WordPress. Esto le permite realizar cambios visuales en las imágenes sin editar ningún código.
Puede editar archivos CSS manualmente o agregar CSS a través del personalizador de WordPress, sin embargo, usar un complemento es la opción más fácil.
Recomendamos usar el complemento CSS Hero. Este complemento le permite editar casi cualquier estilo CSS en su sitio de WordPress sin escribir ningún código.
Hay varios efectos CSS incorporados específicamente para imágenes.
Para obtener más detalles sobre la instalación de complementos, consulte nuestra guía sobre cómo instalar complementos de WordPress.
Después de instalar el complemento, debe hacer clic en el botón “Continuar con la activación del producto”.
Esto lo guiará a través del proceso de activación del complemento.
Después de activar el complemento, puede comenzar a personalizar sus imágenes.
Abra una página o publicación con la imagen que desea animar y haga clic en “CSS Hero” en la parte superior de la página.
Esto abrirá el menú del editor donde puede agregar varios efectos CSS.
Agregaremos una imagen emergente en el efecto de desplazamiento. Primero, debe hacer clic en la imagen que desea editar, luego haga clic en “Fragmento”.
Después de eso, haga clic en Efectos de desplazamiento.
Esto abrirá un menú con diferentes efectos CSS. A continuación, seleccione el efecto “.hvr-pop” y haga clic en Aplicar.
Haga clic en “Guardar y publicar” y el efecto CSS se aplicará automáticamente a su imagen.
Esperamos que este artículo le haya ayudado a aprender cómo agregar efectos de desplazamiento de imagen en WordPress. También puede consultar nuestra guía sobre cómo optimizar imágenes para la web y nuestra guía para principiantes sobre SEO de imágenes.
Si te gustó este artículo, suscríbete a nuestro canal de YouTube para videos tutoriales de WordPress.También puedes encontrarnos en Gorjeo y Facebook.
Los datos expuestos en este sitio web son de índole informativo, no necesariamente están actualizados. Esta información es una recopilación de información de internet.
