[{"@context":"https:\/\/schema.org\/","@type":"BlogPosting","@id":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-efectos-de-desplazamiento-de-imagen-en-wordpress-paso-a-paso\/#BlogPosting","mainEntityOfPage":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-efectos-de-desplazamiento-de-imagen-en-wordpress-paso-a-paso\/","headline":"C\u00f3mo agregar efectos de desplazamiento de imagen en WordPress (paso a paso)","name":"C\u00f3mo agregar efectos de desplazamiento de imagen en WordPress (paso a paso)","description":"\u00bfQuiere aprender c\u00f3mo agregar efectos de desplazamiento de im\u00e1genes en WordPress? Los efectos de desplazamiento de im\u00e1genes pueden hacer que su sitio sea m\u00e1s interactivo ... Leer m\u00e1s<\/a>","datePublished":"2021-06-28","dateModified":"2021-06-28","author":{"@type":"Person","@id":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/#Person","name":"adrimadise\u00f1o","url":"https:\/\/xn--adrimadiseo-beb.com\/author\/mitzamitza-es\/","image":{"@type":"ImageObject","@id":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4f04015a3698191a873267b006e8e8789ce30b6ee841a5518a6033860d50fe16?s=96&d=mm&r=g","height":96,"width":96}},"publisher":{"@type":"Organization","name":"adrimadise\u00f1o.com","logo":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2022\/05\/cropped-logo_adrima.png","width":450,"height":90}},"image":{"@type":"ImageObject","@id":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-efectos-de-desplazamiento-de-imagen-en-WordPress-paso.png","url":"https:\/\/xn--adrimadiseo-beb.com\/wp-content\/uploads\/2021\/06\/Como-agregar-efectos-de-desplazamiento-de-imagen-en-WordPress-paso.png","height":340,"width":550},"url":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-efectos-de-desplazamiento-de-imagen-en-wordpress-paso-a-paso\/","about":["Tutoriales Wordpress"],"wordCount":1536,"articleBody":"\u00bfQuiere aprender c\u00f3mo agregar efectos de desplazamiento de im\u00e1genes en WordPress?Los efectos de desplazamiento de im\u00e1genes pueden hacer que su sitio sea m\u00e1s interactivo y atractivo. Esto crea una mejor primera impresi\u00f3n y mejora el tiempo que pasa en su sitio. En este art\u00edculo, le mostraremos c\u00f3mo agregar efectos de desplazamiento de imagen en WordPress, paso a paso.\u00bfQu\u00e9 son los efectos de desplazamiento de imagen?Los efectos de desplazamiento de im\u00e1genes le permiten agregar elementos interactivos a sus im\u00e1genes est\u00e1ticas, como animaciones, efectos de zoom, ventanas emergentes y m\u00e1s.Por ejemplo, podr\u00eda tener im\u00e1genes que se voltean para revelar sus precios o enlaces a su cartera.Las im\u00e1genes flotantes tambi\u00e9n le brindan una forma creativa de mostrar sus fotos, galer\u00edas y miniaturas.Las im\u00e1genes interactivas y los elementos flotantes pueden ayudar a su sitio de muchas maneras:Mejore el tiempo que sus visitantes pasan en su sitioBrindarle formas creativas de presentar contenido a sus visitantes.Deje que sus usuarios sepan que se puede hacer clic en un elemento del sitio.C\u00f3mo crear efectos de desplazamiento de imagen en WordPressLa mejor manera de agregar efectos de desplazamiento de im\u00e1genes a su sitio web de WordPress es utilizando un complemento de WordPress. Con un complemento, no tiene que perder tiempo editando, formateando y agregando CSS para crear efectos de imagen. Simplemente funciona.Hay todo tipo de complementos que puede utilizar para crear animaciones y efectos de desplazamiento de imagen \u00fanicos. En este tutorial, le mostraremos las cuatro formas diferentes de agregar los efectos de desplazamiento que necesita. 1. Agregar efectos Flipbox de desplazamiento de imagen en WordPressUna caja plegable es una caja que se voltea cuando el mouse pasa sobre ella. Puede agregar esta animaci\u00f3n a sus im\u00e1genes para revelar texto o incluso cambiar la imagen al pasar el mouse.Puede controlar c\u00f3mo se voltea la imagen, junto con el dise\u00f1o de la imagen en ambos lados.Si eres fot\u00f3grafo, puedes usar esto para mostrar tu trabajo y separar tus portafolios.La forma m\u00e1s f\u00e1cil de agregar efectos de flipbox de imagen es con un complemento de WordPress. Un complemento le permite crear y personalizar estos efectos r\u00e1pidamente. Recomendamos utilizar el Flipbox – Superposici\u00f3n de im\u00e1genes de cajas abatibles Awesomes enchufar. Es el mejor complemento de desplazamiento de im\u00e1genes y flipbox para WordPress.Este complemento le permite simplemente agregar efectos de flipbox personalizados a sus im\u00e1genes de WordPress. Viene con docenas de diferentes efectos de animaci\u00f3n y plantillas predise\u00f1adas. Incluso puede controlar los colores y agregar su propio CSS personalizado. Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda sobre c\u00f3mo crear superposiciones y desplazamientos de flipbox en WordPress.2. Agregar efectos de ampliaci\u00f3n y zoom de imagen en WordPressLos efectos de zoom de imagen permiten a los usuarios ver detalles que no podr\u00edan ver en una imagen de tama\u00f1o normal. Este es un gran efecto para tutoriales de productos e im\u00e1genes con altos niveles de detalle. Tambi\u00e9n puede usarlo en su tienda en l\u00ednea para agregar un efecto de zoom como Amazon.La forma m\u00e1s f\u00e1cil de agregar zoom de imagen y efectos de ampliaci\u00f3n a sus im\u00e1genes es mediante el uso de un complemento de WordPress. Recomendamos utilizar el Zoom de imagen WP enchufar. Este complemento le permite simplemente agregar efectos de zoom y ampliaci\u00f3n a sus im\u00e1genes. Tambi\u00e9n est\u00e1 equipado con funciones que le permiten elegir la forma de la lente de zoom, el nivel de zoom y mucho m\u00e1s.Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda sobre c\u00f3mo agregar zoom de aumento para im\u00e1genes en WordPress.3. Agregar efectos de animaci\u00f3n de im\u00e1genes en WordPressHay todo tipo de efectos de desplazamiento adicionales que puede agregar a WordPress.Por ejemplo, tiene galer\u00edas de im\u00e1genes animadas, im\u00e1genes de caja de luz, im\u00e1genes de comparaci\u00f3n, superposiciones de texto y m\u00e1s. Para agregar efectos de desplazamiento como estos, recomendamos usar el Efectos de desplazamiento de imagen Ultimate enchufar. Este complemento es muy liviano, por lo que no afectar\u00e1 el rendimiento y las velocidades de carga de su sitio web. Tambi\u00e9n es muy f\u00e1cil de usar. Puede agregar efectos de imagen \u00fanicos con un par de clics.Lo primero que debe hacer es instalar y activar el Efectos de desplazamiento de imagen Ultimate enchufar. Para obtener m\u00e1s detalles, consulte nuestra gu\u00eda paso a paso sobre c\u00f3mo instalar un complemento de WordPress.Una vez que haya instalado y activado el complemento, debe hacer clic en ‘Image Hover’ en su administrador de WordPress. Esto mostrar\u00e1 ocho efectos de desplazamiento de imagen diferentes entre los que puede elegir. Para este tutorial, usaremos el efecto ‘Efectos de subt\u00edtulos’. Esto agrega texto animado sobre su imagen al pasar el mouse. Primero, haga clic en el cuadro ‘Efectos de subt\u00edtulos’. Esto abre un men\u00fa de diferentes opciones de animaci\u00f3n para elegir.Una vez que haya encontrado el efecto de imagen que le gusta, haga clic en ‘Crear estilo’. En el cuadro emergente, nombre su efecto de desplazamiento y elija el dise\u00f1o. El n\u00famero de dise\u00f1o que seleccione coincide con la secuencia ordenada de im\u00e1genes.Recuerde hacer clic en ‘Guardar’.En la siguiente pantalla, tendr\u00e1 una variedad de opciones para personalizar su efecto de desplazamiento. Sin embargo, dejaremos las opciones de animaci\u00f3n predeterminadas.Si realiza cambios, los ver\u00e1 aparecer en el cuadro “Vista previa”. Para cambiar la imagen predeterminada, coloque el cursor sobre la imagen y haga clic en la opci\u00f3n ‘Editar’.En esta ventana emergente, puede cambiar el t\u00edtulo y la descripci\u00f3n que aparecer\u00e1 al pasar el mouse. Para cargar su imagen, haga clic en el cuadro debajo del t\u00edtulo ‘Imagen’ y cargue o seleccione una imagen de su biblioteca de medios.Tambi\u00e9n puede agregar un enlace y texto de bot\u00f3n si desea que su imagen lleve a los usuarios a otra p\u00e1gina de su sitio web.Una vez que haya terminado, haga clic en ‘Enviar’.Para agregar la imagen a su sitio web, copie el c\u00f3digo corto en el cuadro ‘C\u00f3digo corto’. Luego, abra cualquier p\u00e1gina, publicaci\u00f3n o widget donde desee que aparezca su imagen y pegue el c\u00f3digo corto.Aseg\u00farese de hacer clic en ‘Publicar’ o ‘Actualizar’ para guardar los cambios y hacer que el efecto de desplazamiento de la imagen se active. 4. Adici\u00f3n de efectos emergentes de desplazamiento de imagen en WordPressLos complementos anteriores lo ayudar\u00e1n a agregar funciones como cajas giratorias, efectos de desplazamiento, animaciones y m\u00e1s. \u00bfQu\u00e9 sucede si desea agregar un efecto de desplazamiento de imagen diferente que no est\u00e9 cubierto por los complementos anteriores?La mejor manera de hacerlo es con un complemento CSS personalizado de WordPress. Esto le permite realizar cambios visuales en sus im\u00e1genes sin tener que editar ning\u00fan c\u00f3digo.Puede editar sus archivos CSS manualmente o agregar CSS a trav\u00e9s del personalizador de WordPress, sin embargo, usar un complemento es la opci\u00f3n m\u00e1s f\u00e1cil.Recomendamos utilizar el complemento CSS Hero. Este complemento le permite editar casi todos los estilos CSS en su sitio de WordPress sin escribir una l\u00ednea de c\u00f3digo.Hay todo tipo de efectos CSS integrados espec\u00edficamente para im\u00e1genes. Para obtener m\u00e1s detalles sobre la instalaci\u00f3n de un complemento, consulte nuestra gu\u00eda sobre c\u00f3mo instalar un complemento de WordPress.Una vez que el complemento est\u00e9 instalado, deber\u00e1 hacer clic en el bot\u00f3n ‘Continuar con la activaci\u00f3n del producto’. Esto lo guiar\u00e1 a trav\u00e9s del proceso de activaci\u00f3n del complemento.Una vez activado el complemento, puede comenzar a personalizar sus im\u00e1genes.Abra una p\u00e1gina o publicaci\u00f3n que tenga la imagen o im\u00e1genes que desea animar y haga clic en ‘CSS Hero’ en la parte superior de la p\u00e1gina.Esto abrir\u00e1 el men\u00fa del editor donde puede agregar todo tipo de efectos CSS diferentes.Vamos a agregar una imagen emergente en el efecto de desplazamiento. Primero, deber\u00e1 hacer clic en la imagen que desea editar y luego hacer clic en ‘Fragmentos’. Despu\u00e9s de eso, haga clic en ‘Efectos de desplazamiento’.Esto abrir\u00e1 un men\u00fa de diferentes efectos CSS. A continuaci\u00f3n, seleccione el efecto ‘.hvr-pop’ y haga clic en ‘Aplicar’.Haga clic en ‘Guardar y publicar’ y el efecto CSS se aplicar\u00e1 autom\u00e1ticamente a sus im\u00e1genes.Esperamos que este art\u00edculo le haya ayudado a aprender c\u00f3mo agregar efectos de desplazamiento de im\u00e1genes en WordPress. Es posible que tambi\u00e9n desee ver nuestra gu\u00eda sobre c\u00f3mo optimizar im\u00e1genes para la web y nuestra gu\u00eda para principiantes sobre SEO de im\u00e1genes.Si le gust\u00f3 este art\u00edculo, suscr\u00edbase a nuestro Canal de Youtube para tutoriales en video de WordPress. Tambi\u00e9n puedes encontrarnos en Gorjeo y Facebook. 4.6 \/ 5 ( 274 votos ) "},{"@context":"https:\/\/schema.org\/","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Tutoriales Wordpress","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/#breadcrumbitem"},{"@type":"ListItem","position":2,"name":"C\u00f3mo agregar efectos de desplazamiento de imagen en WordPress (paso a paso)","item":"https:\/\/xn--adrimadiseo-beb.com\/tutoriales-wordpress\/como-agregar-efectos-de-desplazamiento-de-imagen-en-wordpress-paso-a-paso\/#breadcrumbitem"}]}]