Resaltado del complemento Divi: imagen intensa

Image Intense es un complemento premium de terceros creado por la gente de Superfly que agrega un nuevo módulo al Divi Builder para Divi y Extra. El nuevo módulo combina características de tres módulos Divi (módulos de imagen, texto y botones) y luego agrega nuevas características para agregar efectos de superposición y desplazamiento a las imágenes. Las características incluyen 22 transiciones de desplazamiento de imagen, botones, configuraciones de opacidad, modos de mezcla de mezcla, enlaces de texto y mucho más.

Image Intense es una excelente manera de agregar microinteracciones que brindan retroalimentación a sus lectores y llaman la atención sobre su llamado a la acción (CTA). Las animaciones incluyen acercar o alejar la imagen, estirar la imagen, comprimir la imagen, agregar una superposición, deslizar el dedo, revelar texto, etc.

En este complemento destacado, veremos lo que puede hacer el complemento. Las imágenes están tomadas de Unsplash.com.

Instalación y configuración

El complemento agrega un módulo al Divi Builder. Para instalar el módulo, simplemente cargue y active el complemento. Use Divi Builder como de costumbre y coloque el módulo Image Intense dentro de su diseño. Se puede utilizar en lugar de un módulo de imagen.

La configuración general incluye la URL de la imagen, el tamaño de los medios, el estilo de desplazamiento, los títulos, la leyenda, la orientación de la leyenda, el botón, la dirección de la animación, etc. Son configuraciones familiares e incluyen descripciones breves. Las nuevas configuraciones incluyen enlaces a la documentación para obtener más información.

Los títulos superpuestos pueden usar marcado. Aquí puede agregar enlaces, negrita el texto, etc.

La configuración de diseño avanzada incluye ancho de imagen, modo de mezcla de mezcla, opacidad, opacidad al pasar el mouse, degradado de superposición personalizado, etc. Incluye las opciones esperadas de fuente, fondo, borde, color y relleno, así como CSS personalizado .

Ejemplos: poner en práctica la imagen intensa

Para ver lo que puede hacer, creé varios diseños y agregué varios módulos Image Intense. Aquí hay un vistazo a algunas de las animaciones y características.

Animaciones y tamaños de imagen

En este ejemplo, puede ver el tamaño recortado de las imágenes con dos títulos superpuestos. La imagen de la izquierda usa la configuración recortada de 400 x 516 para el tamaño del medio y Auckland para la animación.

La imagen se aleja ligeramente y muestra una superposición con un mensaje. El color y el tamaño de la fuente se pueden ajustar si es necesario.

La imagen de la derecha está ampliada e incluye el mensaje en una superposición. Este es más obvio de la diferencia. Utiliza el estilo de desplazamiento de Jerusalén .

La imagen del centro usa el estilo flotante de Douala .

Puede ver en esta imagen que el marco se movió a la parte inferior de la imagen y ahora muestra el mensaje.

La imagen del centro usa el estilo de superposición de Madison .

Puede ver aquí cómo coloca una superposición sobre la imagen que reduce la opacidad mientras mantiene el foco en el área encerrada en un círculo que incluye el mensaje.

Modo de mezcla de mezcla

Mix Blend Mode es una manera fácil de aplicar atributos CSS a la imagen. Combina el color del módulo con su fondo. Puede crear algunos efectos salvajes y algunas configuraciones funcionan mejor con ciertos colores, por lo que esto requerirá algo de experimentación. Es posible que algunas de las funciones no funcionen con todos los navegadores, por lo que deberá utilizar esta función con precaución.

La imagen del centro utiliza el modo de fusión mixto llamado Luz intensa .

Éste usa Luminosity . También agregué un botón en la parte inferior central y configuré un estilo personalizado.

Opacidad

La opacidad es lo transparente que es una imagen. Cuanto más opaca es una imagen, menos transparencia tiene. La opacidad también se ve afectada por el estilo de animación y el modo de mezcla de mezcla que elija. Puede usarlos en varias combinaciones para ver qué tipos de efectos puede crear. Puede aplicar diferentes niveles de opacidad a la imagen normal y la imagen flotante.

Esta es la imagen normal sin opacidad. Estoy usando el tamaño original completo para la configuración de tamaño de papel.

Aquí la imagen al pasar el mouse. Establecí el índice de opacidad en 0.6. Este usa el estilo de desplazamiento de Cali .

Este usa una imagen grande de 1024 × 1024 sin recortes y una opacidad de imagen de 0.4. Ambos títulos superpuestos utilizan etiquetas HTML. Estoy usando etiquetas para fuerte, énfasis y descanso. Está usando el estilo de desplazamiento de Portland .

Establecí la opacidad de desplazamiento en 1 para que la imagen se revele completamente al desplazar el cursor.

Agregar un degradado personalizado

En la Configuración avanzada de diseño , seleccioné Usar degradado de superposición personalizado . Esto abre un nuevo conjunto de opciones donde puedo seleccionar el color de degradado inicial y final, la orientación del degradado y la posición inicial y final de parada tanto para la imagen normal como para la imagen flotante.

Aquí hay un vistazo al degradado usando el estilo de superposición de Madison .

La imagen de la izquierda muestra una superposición antes de pasar el mouse.

Al pasar el mouse, la superposición se elimina para revelar la imagen. Este está usando el estilo hover de Hanoi .

Intercambio de imágenes

En este ejemplo, quería cambiar una imagen por otra. Esto se hace agregando una imagen como imagen de fondo del módulo en la Configuración avanzada de diseño .

A continuación, establezca el nivel de opacidad para que una imagen se muestre sin desplazarse y la otra imagen se muestre al desplazarse. El que se muestra al pasar el mouse también mostrará un mensaje.

Elegí esta imagen como imagen de fondo y configuré la imagen del módulo para que tenga una opacidad de 0.

Al pasar el mouse, el colibrí se convierte en un águila y muestra un mensaje. Este usa el estilo de desplazamiento de Kiev .

Mezcla de imágenes

También puede combinar las dos imágenes ajustando la opacidad para que la imagen de fondo se vea a través de la imagen de primer plano. Esto puede crear algunos efectos y mensajes interesantes.

Este usa el estilo de desplazamiento de Londres . Ordené los mensajes para aprovechar su ubicación. En este ejemplo, el tamaño de la fuente del título se establece en 24 y el tamaño de la fuente del título se establece en 50.

Aquí está la imagen al pasar el mouse. Las opacidades también se pueden modificar para mostrar ambas, pero una puede ser más prominente.

Agregar enlaces al texto

Se pueden agregar enlaces al texto de la leyenda. Esto se hace colocando un pseudo shortcode con el texto seguido de la URL. El código abreviado se proporciona en la descripción del campo para que pueda copiar y pegar. Utilizará los atributos href, target y class.

Este agrega un título con un enlace que puede llevar a los lectores a una página o publicación para obtener más información.

Esto es ideal para crear CTA, vincular a publicaciones o páginas, etc., para llevar a los lectores a su contenido. También se puede hacer clic en las imágenes en sí mismas. Esto podría llevarlos a un portafolio o una página de contacto o acerca de.

Botones

Puede agregar un botón a la imagen para crear una llamada a la acción.

La imagen de la izquierda usa un degradado radial con marcado para el texto. La imagen de la derecha muestra el botón con un efecto de desplazamiento. Ambas imágenes usan bordes negros. Agregué una superposición para el fondo del botón y establecí el radio del borde en 15. Este ejemplo usa el estilo de desplazamiento de Rochester .

La imagen de la izquierda utiliza un degradado vertical entre dos tonos de negro: el primero con un 65% de opacidad y el segundo con un 19% de opacidad (¡19%! Lo sé ... ¡de nada!).

Las superposiciones, los botones y los degradados son excelentes para crear CTA.

Precio, licencia y documentación

Este es un complemento premium. Cuesta $ 25 por un solo sitio más un sitio de desarrollo que le permite usarlo en un sitio de desarrollo al mismo tiempo que lo usa en su sitio en vivo. Cuesta $ 45 para sitios ilimitados .

La documentación se proporciona en el sitio web e incluye ejemplos y un área de demostración donde puede ver los efectos en vivo. El soporte es proporcionado por un sistema de tickets de soporte.

Pensamientos finales

Image Intense es un módulo excelente para agregar imágenes con transiciones de desplazamiento. Las superposiciones pueden incluir degradados, texto, enlaces, varios niveles de opacidad e incluso cambiar de una imagen a otra. El texto, los botones, los enlaces, etc. tienen múltiples opciones de posición y hay muchas opciones de transición para elegir. Puede hacer aún más agregando su propio CSS.

Encontré el módulo intuitivo de usar. Si puede utilizar un módulo Divi, se sentirá como en casa con este. Todas las características de estilo están aquí. Las transiciones de superposición de desplazamiento son una excelente manera de agregar algo de dinamismo a su sitio web Divi. Si está interesado en agregar transiciones de desplazamiento a sus imágenes, creo que encontrará que Image Intense vale la pena echarle un vistazo.

¡Queremos escuchar de ti! ¿Ha utilizado Image Intense? ¡Cuéntanos tu experiencia en los comentarios a continuación!

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