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 adelgazar, una imagen retocada, una habitación decorada, un coche pintado, etc. Por supuesto, sirven para mucho más que antes. y después de las fotos. Se pueden usar 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 de control deslizante de antes y después para Divi Builder, veremos qué puede hacer y lo ayudaremos a decidir si necesita este complemento de terceros en su Divi. caja de herramientas.
Cargue e instale el complemento Divi Sensei Before and After como de costumbre. Tres no son configuraciones para pasar. Una vez que cargue y active el complemento, verá un nuevo módulo agregado a Divi Builder llamado Sensei Before and After Slider.
El módulo muestra una imagen anterior en el lado izquierdo y una imagen posterior en el derecho. 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 revelan las etiquetas de antes y después y se agrega una superposición. Usted 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 la configuración estándar de enlace, fondo y etiqueta de administrador.
También proporciona campos donde puede cambiar el texto de las etiquetas antes y después. Estoy pasando 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 de inicio para determinar en qué parte de las imágenes comienza el control deslizante y cambiar los colores del control deslizante, el controlador, el fondo del controlador y el icono del controlador. He ajustado cada una de estas configuraciones en el ejemplo anterior.
Etiquetas
Para las etiquetas, puede hacer que se muestren siempre o solo al pasar el mouse por encima, 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é los colores de fondo y de fuente, cambié el tamaño de las fuentes y el tamaño de la altura de línea. También las configuré para que se muestren siempre, de modo que estén 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 negro con un 50 % de opacidad.
Seleccioné azul en este ejemplo y dejé la opacidad al 50%. Permitir que la imagen se muestre mientras estás 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. El texto de superposición y etiqueta es blanco y los elementos deslizantes son negros. Disminuí la opacidad de los fondos de la etiqueta para oscurecerlos. Los he dejado en sus tamaños predeterminados.
Divi Sensei antes y después de los ejemplos del control deslizante
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 gratuitos de Divi que están integrados en Divi. Identificaré los diseños 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. Desactivé la superposición, cambié los elementos del control deslizante a verde e hice que las etiquetas se muestren 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 que el tamaño de la fuente fuera medio y todo en mayúsculas. Felicitaciones si ha tenido o jugado estos sistemas de juego y sabe por qué esta comparación de gráficos inventados 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 Portafolio
Este ejemplo imita la idea de una habitación antes y después de la renovación. Cuando las dos imágenes tienen tamaños diferentes, 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 completará 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. He movido el control deslizante hacia un lado para mostrar más de la imagen anterior.
Como referencia, aquí está la imagen con el controlador movido 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 central está configurado en vertical solo para ser diferente. La superposición usa 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 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 cuadro 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 los colores del diseño. Este es un buen ejemplo de cómo las dos imágenes no tienen por qué ser un antes y un después de lo mismo o incluso de cosas similares. Esta es una buena manera de mostrar los lugares de celebración de bodas, lugares de vacaciones, etc., para ayudar a los compradores a elegir entre ellos (o dificultar la selección, pero no lo recomiendo como objetivo).
Compra
Puedes 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 Divi Sensei Before and After Slider 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 facilita 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 Divi, vale la pena considerar el control deslizante antes y después de Divi Sensei.
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