¿Desea saber de qué manera añadir efectos de desplazamiento de imagen en WP? Los efectos de desplazamiento de imágenes pueden hacer que su lugar sea más interactivo y atrayente. Esto crea una mejor primera impresión y mejora el tiempo que pasa en su lugar. En el presente artículo, le vamos a mostrar de qué manera añadir efectos de desplazamiento de imagen en WP pasito a pasito.
¿Qué son los efectos de substitución de imágenes?
Contents
Los efectos de desplazamiento de imágenes le dejan añadir elementos interactivos a sus imágenes estáticas, como animaciones, efectos de zoom, ventanas emergentes, etc. Por servirnos de un ejemplo, puede tener imágenes que se voltean para descubrir sus costos o bien links a su cartera. Las imágenes flotantes asimismo le ofrecen una forma creativa de enseñar sus fotografías, galerías y miniaturas. Las imágenes interactivas y los elementos flotantes pueden asistir a su lugar de muchas maneras:
- Mejore el tiempo que sus visitantes pasan en su sitio
- Dése formas creativas de presentar contenido a sus visitantes
- Informe a sus usuarios que se puede hacer click en un factor del lugar.
Cómo crear efectos de desplazamiento de imagen en WordPress
La mejor forma de añadir efectos de desplazamiento de imagen a su sitio de WP es emplear un complemento de WP. Con un complemento, no debe perder tiempo editando, formateando y añadiendo CSS para crear efectos de imagen. Sencillamente marcha. Hay todo género de complementos que puede emplear para crear animaciones y efectos de desplazamiento únicos. En este tutorial, le vamos a mostrar las 4 formas diferentes de añadir los efectos de desplazamiento que precisa.
1. Añadir efectos Flipbox de desplazamiento de imagen en WordPress
Un cuadro de alternancia es un cuadro que se da la vuelta cuando el mouse se desplaza sobre él. Puede añadir esta animación a sus imágenes para descubrir texto o bien aun mudar la imagen flotante.
Puede supervisar de qué manera se voltea la imagen, como el diseño de la imagen en los dos lados. Si eres fotógrafo, puedes emplearlo para exhibir tu trabajo y separar tus portafolios. La manera más simple de añadir efectos de flipbox de imagen es utilizar un complemento de WP. Un complemento le deja crear y personalizar estos efectos de forma rápida. Aconsejamos emplear el complemento Flipbox – Awesomes Flip Boxes Image Overlay. Es el mejor plugin de desplazamiento de imágenes y flipbox para WP. Este complemento sencillamente le deja añadir efectos de flipbox adaptados a sus imágenes de WP.
Viene con docenas de diferentes efectos de animación y plantillas preestablecidas. Aun puede supervisar los colores y añadir su CSS adaptado. Para conseguir más detalles, consulte nuestra guía sobre de qué manera crear superposiciones y desplazamientos de flipbox en WP.
2. Añadir efectos de ampliación y zoom de imagen en WordPress
Los efectos de zoom de imagen dejan a los usuarios ver detalles que posiblemente no puedan ver en una imagen de tamaño completo. Es un enorme efecto para tutoriales de productos y también imágenes con altos niveles de detalle. Asimismo puede emplearlo en su tienda virtual para añadir un efecto de zoom como Amazon.
La manera más simple de añadir efectos de ampliación y zoom de imagen a sus imágenes es emplear un complemento de WP. Aconsejamos emplear el complemento WP Image Zoom. Este complemento sencillamente le deja añadir efectos de zoom y ampliación a sus imágenes.
Asimismo está pertrechado con funciones que le dejan escoger la manera de la lente de zoom, el nivel de zoom y considerablemente más. Para conseguir más detalles, consulte nuestra guía sobre de qué manera añadir zoom de incremento para imágenes en WP.
3. Añadir efectos de animación de imágenes en WordPress
Hay todo género de efectos de desplazamiento auxiliares que puede añadir a WP. Por servirnos de un ejemplo, tiene galerías de imágenes animadas, imágenes de caja de luz, imágenes de comparación, superposiciones de texto, etc.
Para añadir efectos de desplazamiento como estos, aconsejamos emplear el complemento Image Hover Effects Ultimate. Este complemento es ligerísimo, con lo que no afectará el desempeño de su sitio ni las velocidades de carga. Asimismo es muy simple de utilizar. Puede añadir efectos de imagen únicos con solo unos pocos clicks. La primera cosa que debe hacer es instalar y activar el complemento Image Hover Effects Ultimate. Para conseguir más detalles, consulte nuestra guía pasito a pasito sobre de qué manera instalar un complemento de WP. En el momento en que haya instalado y activado el complemento, debe hacer click en ‘Image Hover’ en su administrador de WP. Esto va a mostrar 8 efectos de desplazamiento diferentes a fin de que escojas.
Para este tutorial, usaremos el efecto «Efectos de llamada». Esto añade texto animado a su imagen al pasar el mouse sobre el mouse. Primero, haga click en el cuadro «Efectos de subtítulos ocultos». Esto abre un menú de diferentes opciones de animación para escoger.
En el momento en que haya encontrado el efecto de imagen que le agrada, haga click en «Crear un estilo». En el cuadro emergente, asigne un nombre a su efecto de desplazamiento y escoja el diseño. El número de diseño que elija corresponde a la secuencia ordenada de imágenes. No olvide hacer click en «Guardar».
En la próxima pantalla, va a tener una pluralidad de opciones para personalizar su efecto de desplazamiento. No obstante, vamos a dejar las opciones de animación predeterminadas.
Si efectúa algún cambio, los va a ver aparecer en el área «Vista anterior». Para mudar la imagen predeterminada, ponga el cursor sobre la imagen y haga click en la opción «Editar».
En esta ventana emergente, puede editar su título y descripción que aparecerán al pasar el mouse. Para cargar su imagen, haga click en el cuadro bajo el título «Imagen» y cargue o bien elija una imagen de su biblioteca de medios.
Asimismo puede añadir un link y texto de botón si quiere que su imagen redirija a los usuarios a otra página de su sitio. En el momento en que haya terminado, haga click en «Mandar».
Para añadir la imagen a su sitio, copie el código corto en el cuadro «Código corto». Entonces, abra cualquier página, publicación o bien widget donde desee que aparezca su imagen y pegue el código corto.
Asegúrese de hacer click en «Publicar» o bien «Actualizar» para guardar los cambios y hacer que el efecto de desplazamiento de la imagen se active.
4. Añadir efectos contextuales de desplazamiento de imagen en WordPress
Los complementos precedentes lo van a ayudar a añadir funciones como cajas giratorias, efectos de desplazamiento, animaciones, etc. ¿Qué ocurre si quiere añadir un efecto de desplazamiento de imagen diferente que no esté cubierto por los complementos precedentes? La mejor forma de hacerlo es emplear un complemento CSS adaptado de WP. Esto le deja efectuar cambios visuales en sus imágenes sin mudar ningún código. Puede editar sus ficheros CSS manualmente o bien añadir CSS a través del Personalizador de WP, no obstante, utilizar un complemento es la opción más simple. Le aconsejamos que utilice el complemento CSS Hero. Este complemento le deja alterar prácticamente cualquier estilo CSS en su lugar de WP sin redactar una línea de código.
Hay todo género de efectos CSS integrados particularmente para imágenes. Para conseguir más detalles sobre la instalación de un complemento, consulte nuestra guía sobre de qué manera instalar un complemento de WP. En el momento en que el complemento esté instalado, va a deber hacer click en el botón «Proseguir con la activación del producto».
Esto lo guiará a través del proceso de activación del complemento. En el momento en que se activa el complemento, puede empezar a personalizar sus imágenes. Abra una página o bien publicación que contenga la imagen o bien imágenes que quiere animar y haga click en «CSS Hero» en la parte superior de la página. Esto va a abrir el menú del editor donde puede añadir todo género de efectos CSS diferentes. Añadiremos una imagen emergente en el efecto de desplazamiento. Primero, va a deber hacer click en la imagen que quiere editar y después hacer click en «Fragmentos». Tras eso, haga click en «Rollover Effects».
Esto va a abrir un menú de diferentes efectos CSS. Entonces elija el efecto ‘.hvr-pop’ y haga click en ‘Aplicar’. Haga click en «Guardar y publicar» y el efecto CSS se va a aplicar de manera automática a sus imágenes.
Aguardamos que este artículo le haya ayudado a aprender de qué manera añadir efectos de desplazamiento de imágenes en WP. Asimismo puede preguntar nuestra guía sobre de qué manera optimar imágenes para la página web y nuestra guía para principiantes sobre posicionamiento web en buscadores de imágenes. Si le agradó este artículo, subscríbase a nuestro canal de YouTube para poder ver tutoriales en vídeo de WP. Asimismo puede toparnos en Twitter y Fb.
){kind=link}