Los Blurbs son populares dentro de los diseños de Divi. Muestran texto, imágenes, íconos y más, lo cual es excelente para exhibir productos y servicios. ¿Qué pasaría si quisiera que se destaquen más y brinden algunas animaciones flotantes interesantes? Las animaciones comunes se pueden hacer a través de CSS, pero ¿y si quisieras algo diferente? Un complemento llamado Tilt Blurb Divi Module podría ser lo que está buscando.
Tilt Blurb Module es un complemento de terceros de Hædworm que agrega un nuevo módulo de publicidad al Divi Builder (tanto para Divi como para Extra) que agrega interesantes efectos de inclinación, creando una apariencia 3D. En este complemento destacado, echaremos un vistazo al módulo y veremos qué puede hacer. He mostrado algunos gifs, pero la mayoría serán imágenes debido al tamaño de los archivos de los gifs. Las imágenes de los ejemplos se tomaron de Unsplash.com y de WordPress.org.
Instalación del módulo Tilt Blurb Divi
Cargue y active el complemento de forma normal. En el enlace Complemento dentro del menú del tablero, encontrará un nuevo elemento llamado Licencia de Tile Blurb. Haga clic aquí, ingrese su clave de licencia y guarde los cambios. Esto asegurará que reciba actualizaciones.
Se agrega un nuevo módulo a Divi Builder llamado Tilt Blurb. Es de color púrpura dentro del Divi Builder, por lo que es difícil pasarlo por alto. Me gusta cuando los desarrolladores usan diferentes colores para sus módulos para que se destaquen de los módulos estándar (por lo que vale).
El módulo incluye las pestañas estándar más una nueva:
- Contenido: texto, enlace, imagen e ícono, fondo, etiqueta de administrador
- Configuración de inclinación: configuración de inclinación, fondo de inclinación, capas de inclinación
- Diseño: imagen e icono, texto, texto del encabezado, texto del cuerpo, borde, tamaño, espaciado
- Avanzado: ID y clases de CSS, CSS personalizado, animación, visibilidad
Ajustes de inclinación
Para estos ejemplos, agregué un fondo y luego coloqué una imagen más pequeña como primer plano sobre él para crear los efectos 3D. Y luego hizo café. mucho café
Ejemplo con configuración predeterminada
Aquí hay un ejemplo de cómo se ve la inclinación 3D antes de ajustarla. Agregué un título, texto, fondo e icono. La inclinación sigue a mi mouse y separa el texto y el icono de la imagen dándole un aspecto 3D. Para mí, el efecto de paralaje eliminó el fondo, así que no lo usé.
Tamaño con imagen
Esto dimensiona la propaganda usando una imagen oculta y centra el contenido.
Tilt Blurb Size con 2 imágenes con contenido flotante
Este incluye dos imágenes: una para el primer plano y otra para el fondo. La imagen de primer plano y el texto están en 3D utilizando la función de contenido flotante.
Puede ajustar la cantidad de flotación que funciona como un zoom, acercando el contenido de primer plano al lector. Esta imagen usa 200 para la cantidad flotante, que está al máximo.
Cantidad de inclinación
El control deslizante de cantidad de inclinación le permite controlar cuánto se inclinará la imagen. La configuración predeterminada es 20. Este usa 100.
Perspectiva de inclinación
Tilt Perspective profundiza la perspectiva. Cuanto menor sea el número, más profunda será la perspectiva. El valor predeterminado es 1000. Este ejemplo es 200.
Escala de inclinación
Tilt Scale es un nivel de zoom. El valor predeterminado es 1,1, lo que significa que, al pasar el mouse, la imagen se multiplica por 1,1. Este ejemplo es 2. Va a 0 pero el nivel 0 creó un zoom continuo hacia adelante y hacia atrás que no funcionó para esta imagen. Puede tomar un poco de experimentación para que haga lo que usted quiere que haga.
Velocidad de inclinación
Tilt Speed controla la velocidad a la que se mueve la imagen mientras se desplaza. Cuanto menor sea el número, más rápido se mueve. El valor predeterminado es 100. Este es 5000. Soy partidario del efecto lento.
Inclinación inversa
Tilt Reverse cambia la dirección de la inclinación. Normalmente, la inclinación se aleja del mouse. Reverse inclina la imagen hacia el ratón.
Deslumbramiento de inclinación
Tilt Glare agrega un efecto de deslumbramiento que sigue al mouse. La cantidad de deslumbramiento es ajustable. La imagen de arriba usa .8, que es la configuración predeterminada. Esto es genial para crear efectos de iluminación.
Radio del borde
Border Radius cambia la forma del borde. El valor predeterminado es 40. Esto se establece en 100, la cantidad máxima.
Fondo de inclinación
Tilt Background le permite establecer un color de fondo y efectos de borde.
Fondo de inclinación
Un efecto secundario del color de fondo de inclinación es que crea un brillo agradable alrededor de la imagen.
Ajuste el color del fondo de inclinación, el ancho del borde, el estilo del borde del fondo, el ancho del borde y el color de la sombra del borde y del cuadro.
Distancia de fondo de inclinación
La distancia de fondo de inclinación ajusta la distancia de la sombra. Está configurado en -50 de forma predeterminada. Este ejemplo usa -25.
Este ejemplo utiliza una distancia de fondo de inclinación de 0 y una opacidad de 0,3, lo que crea una superposición sobre el fondo.
Tamaño/escala de fondo de inclinación
El tamaño/escala del fondo de inclinación cambia la distancia del fondo de inclinación. El valor predeterminado es 1.04. Este es 1.2.
Capas de inclinación
Tilt Layers aplica la misma imagen una y otra vez como múltiples capas, creando un efecto 3D sólido. Puede usar una imagen o un color de fondo y puede ajustar la profundidad de la capa. He aplicado la imagen de arriba con una profundidad de capa de 50.
La imagen que apliqué se ve aquí como el borde. He ajustado la cantidad de inclinación para que sea más fácil de ver.
Como era de esperar, la parte inferior de la imagen se ve diferente. Esta es una excelente manera de agregar algo de textura al borde. Una profundidad de capa más pequeña hará que el borde sea más delgado.
Este usa una profundidad de capa de 10.
Este ejemplo utiliza tanto el fondo inclinado como las capas inclinadas.
Aquí hay un logotipo de WordPress en 3D que parece estar encerrado en cristal. Cargué el logotipo en el área de imagen Imagen e icono, configuré la cantidad de inclinación en 100, usé el resplandor de inclinación predeterminado, agregué el logotipo a la imagen de la capa en Capas inclinadas, configuré una profundidad de capa de 50 y configuré el color de la capa en blanco y casi completamente transparente.
Aquí está el logotipo sin color de capa. Los lados son más difíciles de ver.
Licencia, soporte y documentación
El complemento se puede usar en sitios web ilimitados para usted y sus clientes. Incluye 6 meses de soporte. La documentación se proporciona en el sitio web del desarrollador. Incluye instrucciones sobre cómo crear algunos de los ejemplos que se muestran en el sitio web. Me gustaría ver aún más ejemplos, como por ejemplo, cómo se hicieron los logotipos.
Pensamientos finales
Tilt Blurb Module proporciona muchos efectos de inclinación interesantes, lo que crea una apariencia 3D agradable para las imágenes, íconos y texto. Es una excelente manera de crear CTA, portadas de libros en 3D e imágenes de productos. Tilt Blurb Module es innovador e intuitivo. Si desea agregar algunos efectos de inclinación agradables a sus anuncios publicitarios, vale la pena echarle un vistazo al módulo Tilt Blurb.
Queremos escuchar de ti. ¿Has probado Tilt Blurb Divi Module? Háganos saber lo que piensa al respecto en los comentarios a continuación.
Imagen destacada a través de hobbit / shutterstock.com