Lo más destacado del complemento Divi: Panorama para Divi

Los panoramas desplazables son excelentes para mostrar imágenes grandes en un espacio pequeño. En lugar de reducir su tamaño para que quepa en la pantalla, lo que puede hacer que no se vean, colocar la imagen dentro de un panorama desplazable le permite mostrar la imagen más grande en su tamaño real. El visitante puede ver la imagen completa arrastrándola. Divi no tiene una función panorámica nativa, pero se puede agregar fácilmente con un complemento de terceros llamado Panorama for Divi .

Panorama for Divi agrega un nuevo módulo a Divi Builder que facilita la creación de panoramas verticales y horizontales. Los panoramas pueden detenerse o repetirse. Agregue una superposición, establezca la altura, elija el estilo de animación y coloque panoramas dentro de cualquier diseño Divi. Es sensible y táctil.

Para esta descripción general, estoy usando Panorama para Divi versión 1.0 con Divi versión 3.2.2 y WordPress versión 4.9.5. Las imágenes fueron tomadas de Unsplash.com.

Módulo panorámico

Se agrega un nuevo módulo a Divi Builder llamado Panorama. Es de color azul oscuro e incluye el logotipo de la editorial, por lo que se destaca muy bien.

La pestaña Contenido incluye configuraciones para elegir la imagen, el texto alternativo, la altura, la dirección en la que se puede desplazar el contenido (elija entre horizontal o vertical), si la imagen se repite o no, para mostrar una superposición, el tiempo de animación (la cantidad de tiempo que la la imagen sigue moviéndose después de dejar de desplazarse), el tipo de aceleración (funciona con la animación) y el fondo.

La pestaña Diseño incluye el color de superposición, el espaciado, el borde, la sombra del cuadro y la animación. La pestaña Avanzado incluye los campos CSS estándar. Me gusta que puedas elegir el color de superposición. Me gustaría ver una configuración para el color del icono.

Ejemplos de Panorama para Divi

Aquí hay un ejemplo usando la configuración predeterminada para el fondo y las funciones. Coloqué el módulo dentro del paquete de diseño de Bienes Raíces usando una fila de una sola columna. Establecí la altura para que coincida con la imagen (870 píxeles) y dejé la dirección del contenido en horizontal.

Está configurado para no repetirse, por lo que se detiene cuando llega al final de la imagen.

Este se repite, creando un pergamino sin fin. Esto es especialmente bueno para imágenes de 360 ​​grados .

No se identifica como desplazable por defecto. El cursor del mouse cambia de un puntero a flechas que apuntan en las cuatro direcciones, pero la única forma de saberlo es pasar el mouse sobre él. El cursor que apunta en todas las direcciones indicaría desplazamiento en todas las direcciones, pero solo se desplaza horizontal o verticalmente, no ambos. Esto se puede resolver agregando una superposición.

He añadido una superposición marrón. La superposición en sí agrega un ícono con una mano que muestra que la imagen se puede desplazar. Utiliza una flecha para mostrar que se puede desplazar horizontalmente. El nivel de opacidad se establece en 20% de forma predeterminada. Lo dejé en la configuración predeterminada.

La superposición y el ícono desaparecen al pasar el mouse por encima y el cursor se convierte en la flecha de 4 vías.

Aquí hay un ejemplo de cuando la superposición es útil. Para este, quería colocarlo junto a una imagen en una fila de dos columnas. Establecí la altura en 287 píxeles para que coincida con la altura de la imagen. El problema es que ambas se ven como imágenes normales, así que tendré que agregar una superposición.

He añadido una superposición azul. El ícono se destaca y se nota que este es desplazable cuando los otros no lo son.

Estos ejemplos usan la dirección de contenido vertical. Establecí la altura en 500 píxeles y agregué superposiciones. El de la izquierda tiene una superposición negra con una transparencia del 40% y un borde redondeado con sombra de caja. El de la izquierda tiene una superposición roja con la transparencia predeterminada y tiene una sombra de cuadro.

Este usa animación y aceleración. La animación se establece en 1000 (1 segundo) y la aceleración es Ease In.

La aceleración determina cómo funciona el desplazamiento.

  • Desplazamiento lineal a medida que se desplaza y luego continúa el desplazamiento hasta que finaliza el tiempo de animación. Es el desplazamiento más suave.
  • Ease In Out espera hasta que haya movido el mouse para desplazarse y luego continúa el desplazamiento hasta que finaliza el tiempo de animación.
  • Ease Out se desplaza instantáneamente y continúa hasta que se completa el tiempo de animación. Funciona de manera similar a Lineal.
  • Ease In espera hasta que el mouse termine y luego continúa el desplazamiento hasta que se completa el tiempo de animación.

Aquí hay otro ejemplo de cómo se ve dentro de un diseño. En este ejemplo, coloqué un panorama horizontal dentro del paquete de diseño de cafetería, reemplazando el módulo de video para mostrar una foto de 360 ​​grados de la cafetería. Utiliza una superposición negra con un 20 % de transparencia. Se ve muy bien tal como está, pero creo que se vería aún mejor con un ícono más grande.

Uso de Panorama para Divi con Visual Builder

No muestra la imagen panorámica en Visual Builder, pero puede realizar todos los ajustes. Simplemente no verá los efectos mientras esté en Visual Builder.

Uso de Panorama para Divi con Extra

Funcionó bien con Extra . No hubo diferencias independientemente de si usé Divi o Extra, por lo que no tuve que cambiar nada del formato.

Aquí está el ejemplo de la cafetería usando una barra lateral. La imagen no es tan amplia, por supuesto, pero esto no importa tanto cuando puedes desplazarte por el panorama. Esta es una de las ventajas del panorama. Una imagen normal habría reducido su tamaño, lo que está bien para muchas imágenes, pero cuando desea mostrar la imagen más grande, esta es una excelente opción.

Licencia

Hay dos licencias para elegir:

  • Sitio único – $7.99
  • Sitios ilimitados – $21.99

Puedes ver la información de compra en la web del desarrollador .

pensamientos finales

Panorama for Divi es un complemento interesante. Me gusta la idea de mostrar imágenes grandes en un espacio pequeño. Mi uso favorito de Panorama for Divi es para fotos de 360 ​​grados. Esto puede ser una ubicación, una casa para mostrar las habitaciones, eventos, etc.

Funciona muy bien tal como está, pero puedo ver algunas formas en las que se puede expandir. Por ejemplo, me gustaría ver una opción para elegir diferentes íconos y una opción para diseñarlos tanto en color como en tamaño.

Encontré el complemento fácil de usar. La mayoría de las configuraciones están etiquetadas o se explican por sí mismas. Si está interesado en agregar panoramas a sus diseños Divi, vale la pena echarle un vistazo a Panorama for Divi.

Queremos escuchar de ti. ¿Has probado Panorama para Divi? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de Natykach Nataliia / shutterstock.com