Resaltado del complemento Divi - Módulo Divi de Tilt Blurb

Los desenfoques son populares en los diseños de Divi. Muestran texto, imágenes, íconos y más, lo cual es ideal para mostrar productos y servicios. ¿Qué pasaría si quisiera que se destaquen más y proporcionen algunas animaciones de desplazamiento interesantes? Las animaciones comunes se pueden hacer a través de CSS, pero ¿y si quisiera algo diferente? Un complemento llamado Tilt Blurb Divi Module podría ser lo que está buscando.

¿Qué es el módulo Tilt Blurb?

Tilt Blurb Module es un complemento de terceros de Hadworm que agrega un nuevo módulo de propaganda al Divi Builder (para Divi y Extra) que agrega efectos de inclinación interesantes, 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 gif. Las imágenes de los ejemplos están tomadas de Unsplash.com y de WordPress.org.

Instalación del módulo Divi de Tilt Blurb

Sube y activa el complemento como de costumbre. En el enlace del complemento dentro del menú del tablero, encontrará un nuevo elemento llamado Tile Blurb License. Haga clic aquí, ingrese su clave de licencia y guarde los cambios. Esto asegurará que reciba actualizaciones.

Se agrega un nuevo módulo al 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 icono, 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

Configuración 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

A continuación, se muestra un ejemplo de cómo se ve la inclinación 3D antes de realizar ajustes. Agregué un título, texto, fondo e ícono. La inclinación sigue a mi mouse y separa el texto y el ícono 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

Éste incluye dos imágenes, una para el primer plano y otra para el fondo. La imagen y el texto de primer plano están en 3D mediante la función de contenido flotante.

Puede ajustar la cantidad de flotación que funciona como un zoom, acercando el contenido en 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. El valor predeterminado 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 que sea necesario experimentar un poco para que haga lo que usted desea.

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 moverá. El valor predeterminado es 100. Este es 5000. Soy partidario del efecto lento.

Inclinación hacia atrás

Tilt Reverse cambia la dirección de la inclinación. Normalmente, la inclinación se aleja del mouse. Invertir inclina la imagen hacia el mouse.

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 ideal para crear efectos de iluminación.

Radio de borde

Border Radius cambia la forma del borde. El valor predeterminado es 40. Se establece en 100, la cantidad máxima.

Fondo de inclinación

Inclinar fondo le permite establecer un color de fondo y efectos de borde.

Fondo de inclinación

Un efecto secundario del color de fondo inclinado es que crea un brillo agradable alrededor de la imagen.

Ajuste el color de fondo de la 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 el cuadro.

Distancia de inclinación del fondo

La Distancia de fondo inclinado 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

Tilt Background Size / Scale cambia la distancia del fondo inclinado. 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 capas múltiples, creando un efecto 3D sólido. Puede usar una imagen o un color de fondo y puede ajustar la profundidad de la capa. Apliqué la imagen de arriba con una profundidad de capa de 50.

La imagen que apliqué se ve aquí como el borde. Ajusté 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 de inclinación como las capas de inclinación.

Aquí hay un logotipo de WordPress en 3D que parece estar encerrado en cristal. Cargué el logotipo en el área de imagen Imagen e ícono, establecí 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 de inclinación, establecí una profundidad de capa de 50 y establecí el color de la capa en blanco y casi completamente transparente.

Aquí está el logo sin color de capa. Los lados son más difíciles de ver.

Licencia, soporte y documentación

El complemento se puede utilizar 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 cómo se hicieron los logotipos.

Pensamientos finales

El módulo Tilt Blurb proporciona muchos efectos de inclinación interesantes, lo que crea un bonito aspecto 3D en las imágenes, los iconos y el texto. Es una excelente manera de crear CTA, portadas de libros en 3D e imágenes de productos. El módulo Tilt Blurb es innovador e intuitivo. Si desea agregar algunos efectos de inclinación agradables a sus borrones, vale la pena echarle un vistazo al módulo Tilt Blurb.

Queremos escuchar de ti. ¿Has probado el módulo Divi de Tilt Blurb? Háganos saber lo que piensa al respecto en los comentarios a continuación.

Imagen destacada a través de hobbit / shutterstock.com