Cómo agregar imágenes superpuesto al div

Una diapositiva de video es una excelente manera de mostrar mucho contenido de video en un espacio pequeño. Por defecto, las diapositivas de video muestran un video instantáneo. Hay momentos en que quieres darle a los diapositivas de video un aspecto diferente. En este artículo, veremos cómo agregar superposiciones de imágenes al control deslizante de video Div. También veremos cómo personalizar la superposición con el ícono del mouse y la reproducción. Vamos a empezar. Sobre el módulo de video deslizante, el módulo de video deslizante puede mostrar videos MP4 o Webm. Puede subirlos a su biblioteca de medios o hacer un enlace a ellos usando la URL para que pueda alojarse en otro lugar. El módulo de video Slider es excelente para tutoriales, cursos, reseñas de productos, videos musicales y más.
Puede solicitar a los videos que muestren la captura de pantalla predeterminada o agregar su propia imagen. Agregar sus propias imágenes le permite crear un diseño consistente en su sitio, independientemente del contenido de video. Cada diapositiva es un submodio que se agrega al módulo en sí. Puede estilizar el módulo para crear configuraciones predeterminadas y puede diseñar cada submodelo individual. Si no estille el submodul, utilizará el estilo predeterminado que ha configurado en la configuración del módulo habitual. Las opciones incluyen flechas, imágenes superpuestas, iconos personalizados y superposición con el cursor.

Agregar el módulo de video deslizante a una nueva página ahora, para agregar el módulo de video deslizante a una página y ver cómo usarlo y estilizarlo. Utilizo la página sobre el paquete de consultores de diseño gratuito disponible en el Div. Agregaré el módulo entre dos de las secciones.

Primero, active Visual Builder y agregue una nueva fila con una sola columna. El fondo está en la sección, por lo que podemos ir al modo. Luego busque video y haga clic en el Slider Video Div.

Agregue sus videos al módulo de video deslizante El módulo de video del control deslizante agrega un modo sub -modo de video predeterminado para iniciarse. Haga clic en el icono de la rueda para abrir su configuración.

Luego elimine el video predeterminado o seleccione el icono para cambiar el video. Ahora, puede seleccionar cargar un video MP4 o Webm o ingresar una URL para un video que esté alojado en otro lugar. Haga clic en Agregar video para el tipo que desea agregar.

Luego, cargue el video en su biblioteca de medios y seleccione, o ingrese la URL del video que desea mostrar.

Haga clic en Agregar nuevo video y elija el video para el módulo deslizante.

Repita este proceso hasta que haya agregado todos los videos. Cada video es una nueva diapositiva. También puede nombrarlos agregando una etiqueta de administrador en el área de selección de video desde su configuración.

La imagen predeterminada se superpone a Video Slider aún más, para ver cómo funciona con la superposición predeterminada. Esto nos ayudará a ver qué hace la nueva superposición cuando la agregamos. Desde que agregué URL en YouTube, mis videos tienen comandos, información y enlaces de YouTube. Las diapositivas se muestran debajo del video actual. La diapositiva actual tiene una superposición oscura.

Pasando con el mouse sobre la diapositiva principal, se muestran las flechas de navegación y se cambia el ícono rojizo.

Pasando con el mouse sobre una diapositiva, hay una superposición y un icono de reproductor blanco. Agregue las superposiciones de la imagen del video deslizante, agregaremos una superposición a cada video. En primer lugar, debemos activar la opción de superposición. En la configuración de contenido del módulo deslizante, desplácese hacia abajo y seleccione superposiciones de imagen en el video principal.

Mostrar la imagen superposiciones en el video principal: Sí

Las superposiciones ahora se activan para cada diapositiva. Notará que la configuración predeterminada del reproductor ahora ha sido reemplazada por la configuración del DIV para el video actual. Podemos atacar cada diapositiva individual o el módulo en su conjunto.
La contilización de la diapositiva de video se puede diseñar cada video individual o podemos atacar el módulo. Los videos utilizarán su estilo individual si está disponible. Si no, entonces usará el estilo del módulo. Hay algunas opciones que solo están disponibles en la configuración del módulo. Mostraré las opciones de estilo para ambos. Para atacar el módulo, seleccione la pestaña de diseño. Para atacar las diapositivas individuales, seleccione sus iconos de rueda y luego haga clic en la pestaña Diseño. Repita el proceso para cada diapositiva para personalizar cada una.

Afinar la configuración del módulo de video deslizante predeterminado, comenzaremos con la configuración del módulo de video deslizante predeterminado. Cada diapositiva que no es elegante individualmente utilizará estas configuraciones.
Reproducir la pestaña de diseño de Color Icon Seleccione. En pedidos, elija un color personalizado para el icono de juego. Yo uso #E3332E. Este es un tono de rojo que coincide con un icono que ya se usa en esta plantilla de página. El icono y las miniaturas del jugador usarán este color. Reproducir controladores de iconos: #E3332E

El icono entonces, seleccione el icono de reproducción de la lista. Busque jugar y elegir su favorito. Seleccioné el gran triángulo para que pudiera destacarse.
Icono: gran triángulo
Juega el tamaño de fuente de iconos luego, para cambiar el tamaño del icono. El valor predeterminado es 96px. Lo cambié a 160px para resaltarlo. Esto solo afecta la gran diapositiva. Las miniaturas no se ven afectadas por esta opción.


Use el tamaño de fuente de icono de juego: sí
Tamaño de fuente de icono de reproducción: 160px

Color de la superposición en miniatura Entonces, cambie el color de la superposición en miniatura en RGBA (243,244,239.0.73). Esto afecta la superposición del cursor tanto para el jugador principal como para las miniaturas deslizantes.
Color de superposición en miniatura: RGBA (243,244,239,0,73)
Afinar las diapositivas del módulo de diapositivas de video, estilizaremos cada diapositiva individualmente. Dejaré dos en la configuración y estilo predeterminados en los otros dos. Destacar una diapositiva de video abre la diapositiva que desea estilizar seleccionando el icono de la rueda.

La imagen exitosa desplácese hacia abajo para superponer y seleccione Agregar imagen.
Overlay: agregue una imagen

Cargue o elija una imagen de su biblioteca de medios.

Su diapositiva ahora mostrará la imagen que seleccionó en lugar de una imagen en el video. Reproducir icono de color
Vaya a la pestaña Diseño y seleccione un nuevo color para el icono de juego. Seleccioné azul. Tenga en cuenta que esto solo afecta la diapositiva, no en miniatura.

El ícono entonces, elija un nuevo icono para esta diapositiva. Seleccionamos la flecha rota. Esto también es cierto para la diapositiva.

Icono: flecha rota

Stile La siguiente diapositiva de video continúa el proceso para cada diapositiva. Abrí la cuarta diapositiva de este ejemplo. La imagen exitosa se desplaza hacia abajo para superponer y seleccione la imagen deseada.
Superposición de la imagen: agregue una imagen

Reproducir el color del icono Vaya a la pestaña Diseño y seleccione el color del icono que desea mostrar esta diapositiva. Seleccioné Orange.
Icono de color: #e09900

El icono luego elige el icono que desea mostrar. Seleccionamos la flecha rodeada completa. Cuando haya terminado con diapositivas, cierre el módulo y guarde su trabajo.
Icono: flecha rodeada completa

Los resultados de la superposición de la imagen de video deslizante aquí es cómo se ve el control deslizante de video en mi página. Creé algunos ejemplos. Este ejemplo muestra la configuración predeterminada con el patio de recreo y la superposición con el mouse.
Este ejemplo muestra la superposición de imagen personalizada con un icono de reproducción personalizado. Paso el mouse sobre su miniatura para mostrar cómo la imagen y el icono funcionan separados de la diapositiva.

Este ejemplo muestra la segunda diapositiva con una superposición de imagen personalizada y un icono de reproducción. PASO el mouse sobre la diapositiva para mostrar la superposición de desplazamiento a medida que aparece sobre la imagen personalizada.
Aquí hay otro ejemplo de cómo se puede usar. Debido a que puede agregar cualquier imagen que desee, puede usar imágenes para describir el contenido. Este ejemplo funcionaría para cursos o tutoriales. Tiene solo un fondo de gradiente, pero puede usar cualquier imagen deseada para crear imágenes presentadas para sus cursos y tutoriales. Solo cambié la superposición de la imagen, pero esto le da a los videos un aspecto y un aspecto completamente diferentes.

Pensamientos finales Esta es nuestra forma de agregar superposiciones de imagen al control deslizante de video Div. El módulo de video deslizante es excelente para cursos, tutoriales o cualquier tipo de serie que desee mostrar en diapositivas. Div facilita la adición de imágenes personalizadas superpuestas para proporcionar a cada diapositiva un aspecto diferente a la captura de pantalla del video. Puede dar forma a las diapositivas de forma independiente para que no necesite verse igual. También puede agregar un icono de jugador personalizado y pasar con el mouse sobre cada diapositiva o crear un icono predeterminado y superponerse para que todas las diapositivas se usen. Queremos escuchar de ti. ¿Agrega superposiciones de imagen al módulo Divi Slider de video? Dinos en los comentarios.