Resaltado del complemento Divi: Divi Sensei Before After Slider

Los controles deslizantes Antes y Después son una excelente manera de permitir que los visitantes comparen dos imágenes. Como su nombre indica, pueden ser imágenes antes y después de que se cambie algo, como la pérdida de peso, una imagen retocada, una habitación decorada, un coche pintado, etc. Por supuesto, son útiles para mucho más que antes. y después de las fotos. Se pueden utilizar para comparar gráficos, productos, destinos de vacaciones y mucho más.

En este artículo, echaremos un vistazo a Divi Sensei Before and After Slider, un módulo deslizante de antes y después para Divi Builder, veremos lo que puede hacer y lo ayudaremos a decidir si necesita este complemento de terceros en su Divi. caja de herramientas.

Módulo deslizante antes y después de Divi Sensei

Cargue e instale el complemento Divi Sensei Before and After como de costumbre. Tres no son configuraciones por las que pasar. Una vez que cargue y active el complemento, verá un nuevo módulo agregado al Divi Builder llamado Sensei Before and After Slider.

El módulo muestra una imagen anterior a la izquierda y una imagen posterior a la derecha. Muestra una barra deslizante en el centro que los usuarios pueden agarrar y deslizar de un lado a otro. Al pasar el cursor sobre las imágenes, se muestran las etiquetas de antes y después y se agrega una superposición. Tiene control de diseño sobre cada uno de estos elementos.

Echemos un vistazo a las características y opciones del control deslizante. Para estos ejemplos, estoy usando imágenes de Unsplash.com.

Pestaña de contenido

La pestaña Contenido le permite agregar una imagen anterior, una imagen posterior y etiquetas. En este ejemplo, agregué dos versiones diferentes de la misma imagen para crear la imagen del antes y el después. Esto es útil para mostrar los resultados de una foto que ha sido retocada. Las opciones también incluyen el enlace estándar, el fondo y la configuración de la etiqueta de administrador.

También proporciona campos donde puede cambiar el texto de las etiquetas de antes y después. Paso el cursor sobre las imágenes para revelar las etiquetas. Solo se muestran al pasar el mouse de forma predeterminada, pero puede cambiar esto.

Ficha Diseño

La pestaña Diseño incluye configuraciones para el control deslizante, las etiquetas y la superposición. También incluye la configuración estándar de tamaño, espaciado, borde, sombra de cuadro, filtros, transformación y animación.

Deslizador

La configuración del control deslizante le permite elegir la dirección del control deslizante entre horizontal y vertical, establecer el desplazamiento inicial para determinar en qué parte de las imágenes comienza el control deslizante y cambiar los colores del control deslizante, el control, el fondo del control y el icono del control. He ajustado cada una de estas configuraciones en el ejemplo anterior.

Etiquetas

Para las etiquetas, puede hacer que se muestren siempre o solo se muestren al pasar el mouse, y ajustar los fondos y las fuentes. Los colores de fondo incluyen colores sólidos y ajustes de opacidad. Puede ajustar los fondos individualmente, pero no le permite ajustar los colores del texto individualmente. También puede elegir las fuentes, cambiar sus tamaños, estilo, alineación, altura de línea, agregar una sombra, etc. La altura de línea establece el tamaño del fondo.

En el ejemplo anterior, especifiqué el fondo y los colores de la fuente, cambié el tamaño de las fuentes y el tamaño de la altura de la línea. También los configuré para que se muestren siempre para que sean visibles sin que el usuario tenga que pasar el cursor sobre las imágenes para verlas.

Cubrir

La superposición está habilitada de forma predeterminada. Puede desactivarlo, ajustar el color y ajustar la opacidad. El color predeterminado es el negro con un 50% de opacidad.

Seleccioné azul en este ejemplo y dejé la opacidad al 50%. Permitir que la imagen se vea mientras está flotando parece funcionar mejor. Si usa un color claro u oscuro y la cantidad de opacidad que establezca estará determinada por los colores de la imagen y cómo desea usar la superposición.

Para este ejemplo, he usado un esquema de color en blanco y negro. La superposición y el texto de la etiqueta son blancos y los elementos del control deslizante son negros. Disminuí la opacidad de los fondos de la etiqueta para oscurecerlos. Los dejé en sus tamaños predeterminados.

Ejemplos de control deslizante antes y después de Divi Sensei

Veamos algunos ejemplos de formas en que se puede usar el control deslizante y cómo se ven dentro de los diseños de Divi. Estoy usando imágenes de Unsplash y las que están disponibles en los diseños Divi gratuitos que están integrados en Divi. Identificaré los diseños de Divi que estoy usando sobre la marcha.

Comparación de gráficos

Para este, utilicé elementos de diseño del paquete de diseño Divi Video Game. Deshabilité la superposición, cambié los elementos del control deslizante a verde e hice que las etiquetas se mostraran siempre. El fondo de las etiquetas es azul sólido. Aumenté el tamaño de la fuente, cambié el color, usé la familia de fuentes Rubik, hice el medio de peso de la fuente y las hice en mayúsculas. Felicitaciones si ha tenido o ha jugado estos sistemas de juego y sabe por qué esta comparación de gráficos inventada no puede existir.

Así es como se ve dentro del diseño. Es excelente para hacer comparaciones como esta maqueta de los gráficos de dos máquinas de juego diferentes.

Servicios antes y después de la cartera

Este ejemplo imita la idea de una habitación antes y después de la renovación. Cuando las dos imágenes son de diferentes tamaños, utilizará el tamaño de la imagen más grande y la imagen más pequeña mostrará un espacio. Colocará sus alturas o anchos por igual y rellenará el resto como espacio vacío. En este ejemplo, la imagen de la derecha es más corta que la imagen de la izquierda. Si bien tener imágenes del mismo tamaño funciona mejor, aún funciona bien con imágenes que están cerca del mismo tamaño.

Agregué colores y fuentes del paquete de diseño de Mejoras para el hogar. Así es como se ve dentro de una parte del diseño.

Así es como se ve con la superposición. Moví el control deslizante hacia un lado para mostrar más de la imagen anterior.

Como referencia, aquí está la imagen con el asa movida para mostrar más de la imagen posterior.

Comparación de productos

Para este ejemplo, estoy reemplazando las tres imágenes de té en el diseño de Tea Shop con 3 controles deslizantes DS B&A. Estoy usando colores del diseño para los botones y controles deslizantes. El control deslizante del medio está configurado en vertical solo para ser diferente. La superposición utiliza un color del diseño con una opacidad reducida.

Así es como se ven dentro del diseño. Esto es excelente para comparar los detalles visuales de múltiples productos, múltiples ubicaciones, múltiples colores, para productos que tienen múltiples opciones para mostrar con y sin las opciones, etc.

Comparación de ubicaciones

En este ejemplo, estoy usando el control deslizante para comparar dos ubicaciones. No tienen que ser similares, solo algo para comparar por una razón u otra. Agregué colores del diseño para el control deslizante y las etiquetas, así como las fuentes para las etiquetas. También agregué una sombra de caja para ayudar a que se destaque del resto de las imágenes.

Así es como se ve dentro del paquete de diseño de Siteseeing usando colores del diseño. Este es un buen ejemplo de cómo las dos imágenes no tienen que ser un antes y un después de la misma cosa o incluso cosas similares. Esta es una buena manera de mostrar lugares para bodas, lugares de vacaciones, etc., para ayudar a los compradores a elegir entre ellos (o hacer la selección más difícil, pero no lo recomiendo como objetivo).

Compra

Puede comprar Divi Sensei Before and After Slider en Divi Marketplace. El costo es de $ 5 por uso ilimitado del sitio web y 1 año de soporte y actualizaciones. Este precio incluye una garantía de devolución de dinero de 30 días.

Pensamientos finales

El control deslizante Antes y Después de Divi Sensei es un módulo simple. Por ejemplo, el control deslizante no tiene controles de ancho y las etiquetas no incluyen bordes, sombras de cuadro, degradados, etc., pero la configuración que tiene facilitó el ajuste del estilo de cada diseño al que lo agregué. Por el precio y por lo que puede hacer, el nivel de configuración tiene sentido y pude obtener los diseños que quería con facilidad.

Todos los controles eran intuitivos y nunca pensé en necesitar instrucciones. Incluso puede usar diferentes etiquetas alt para las imágenes para ayudar a mejorar el SEO. Si está interesado en un control deslizante de antes y después para usar con sus sitios web de Divi, vale la pena considerar Divi Sensei Before and After Slider.

Queremos escuchar de ti. ¿Has probado Divi Sensei Before and After Slider? Háganos saber lo que piensa al respecto en los comentarios a continuación.

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