Dos trabajos relacionados. Un carrusel de vídeos se desliza a través de vídeos en una pista horizontal. A galería deslizante muestra una vista previa grande con una tira de miniaturas debajo, que es el diseño que la gente realmente quiere cuando dice “carrusel de video”, porque una fila de miniaturas de video del mismo tamaño es una peor manera de ver cualquier cosa.
Ambos a continuación, además del problema de incrustación que hace que los carruseles de video sean el widget más lento que puedes colocar en una página y la solución de una línea. Ambos widgets son parte del colección completa de widgets de carrusel.
Comience con el problema de velocidad de la página
Seis incrustaciones de YouTube en una página son aproximadamente 3 MB de JavaScript de terceros antes de que se reproduzca un solo video. Cada iframe carga el reproductor de YouTube, sus análisis y su infraestructura de cookies, haga clic o no.
Pon esos seis en un carrusel y todo empeora, porque un carrusel representa todas sus diapositivas, incluidos los que están fuera de la pantalla, por lo que los seis iframes se inicializan a la vez.
La solución es una fachada: muestra la imagen del póster del vídeo con un botón de reproducción y carga la incrustación real sólo cuando alguien hace clic. Una imagen en lugar de seis reproductores. La mayoría de los widgets de vídeo tienen una opción de “carga diferida” o “haga clic para reproducir” que hace esto; enciéndelo y la página se vuelve varios segundos más rápida en el móvil.
Si su widget no lo ofrece, utilice imágenes de póster con una caja de luz en lugar de incrustaciones en línea. Mismo resultado visual, una fracción del peso.
Método 1: control deslizante de galería, vista previa y miniaturas
El Widget de control deslizante de galería le brinda el diseño que la mayoría de las galerías de videos y fotografías desean: un gran panel de vista previa con una tira de miniaturas desplazable. Es un widget profesional y es un widget de imagen, por lo que construye el diseño en lugar de la reproducción. Si su galería es solo de imágenes, sin video, el Galería de platos de vitrina es un diseño importable gratuito con el mismo diseño de placa más miniatura, pero no maneja video.
- Arrastra el control deslizante de la galería y abra la pestaña de contenido.
- Crea tu galería desde la biblioteca multimedia. Para un conjunto de videos, eso significa marcos de carteles aquí, con la reproducción manejada por el método 2 o 3.
- Enciende las miniaturas y configure la tira de miniaturas en modo carrusel para que se desplace independientemente de la vista previa principal.
- Establezca la posición de vista previa: miniaturas debajo, arriba, izquierda o derecha. A continuación se muestra el valor predeterminado seguro; La izquierda o la derecha se adaptan al contenido del retrato.
- Establezca el ancho de vista previa entonces, el panel principal no empuja las miniaturas fuera de la pantalla de la tableta.
Cada campo del widget aparece en Documentación del control deslizante de galería si desea la referencia completa en lugar del camino corto.
El modo carrusel de miniaturas es la configuración que hace esta escala. Sin él, veinte miniaturas se envuelven en cuatro filas y se comen toda la ventana gráfica. Con él, permanecen en una línea desplazable.
En el móvil, las miniaturas debajo de la vista previa son tres o cuatro visibles. Las posiciones izquierda y derecha colapsan automáticamente hacia abajo, que es la derecha, porque una franja lateral en una pantalla de 390px no deja nada para la vista previa.
Método 2: Media Carousel, vídeo que se reproduce en la pista
Si los videos tienen que reproducirse dentro del carrusel en lugar de detrás de un clic, Media Carousel de Elementor Pro es el widget que lo hace. Cada diapositiva está configurada en Imagen o Video, y una diapositiva de video toma su propia URL de YouTube, Vimeo o autohospedada, por lo que los conjuntos mixtos funcionan en una sola pista.
Si el conjunto es realmente una biblioteca en lugar de una tira, como un curso, una serie de tutoriales o un archivo de canal, la lista de reproducción de videos de Elementor Pro tiene la mejor forma. Vídeos enumerados al lado del reproductor, cada uno con un título y una duración, y el jugador intercambia sin cargar una página. Es una lista en lugar de un carrusel, y ese es el argumento: los títulos son cómo la gente decide qué ver, y una fila de miniaturas les hace adivinar.
Volver al carrusel. Media Carousel es el único widget aquí que reproduce vídeo en línea, y ese también es su costo, que es para lo que sirven las configuraciones a continuación.
- Activa el modo caja de luz. La reproducción en línea significa que cada diapositiva lleva un reproductor. El modo Lightbox muestra el póster y carga el reproductor al hacer clic, que es el patrón de fachada desde la parte superior de esta publicación integrada en el widget.
- No reproduzcas automáticamente el primer vídeo. El sonido disparado sin avisar es la forma más rápida de perder a alguien. Si debes reproducir automáticamente, silenciarlo.
- Coloque el tiempo de ejecución en el título. “¿Cuánto dura esto?” es la primera pregunta que alguien hace sobre un video, y responderla antes del clic aumenta las tasas de finalización.
Método 3: Carrusel de carteles gratuito con vídeo detrás del clic
¿sin licencia y todavía quieres un carrusel de vídeos? Dos rutas gratuitas, y ambas mantienen la página rápida porque nada se carga hasta que alguien se lo pide.
- Exporta un marco de póster para cada vídeo y cárgalos como imágenes.
- Agréguelos a la galería gratuita Image Carousel.
- Encienda la caja de luz para que un clic abra el marco sobre la página en lugar de alejarse.
- Agregue una superposición de botones de reproducción en la pestaña Estilo para que las diapositivas se lean como videos en lugar de fotografías. Sin él, nadie hace clic.
Eso te da la mirada. Lo que no te da es un destino diferente por diapositiva, porque un carrusel basado en una galería le da a cada diapositiva el mismo enlace. Si cada vídeo necesita su propia página, dale a cada uno una publicación y usa la gratuita Widget de blog en cambio, en modo carrusel: extrae la miniatura, el título y un enlace a la publicación en la que se encuentra el video. En Pro, el Carrusel circular hace lo mismo con una consulta, por lo que aparecen nuevos videos sin que edites la página.
Este es el patrón de fachada desde lo alto del poste, construido a mano. Es la versión más rápida de un carrusel de vídeo que existe, porque nada se carga hasta que alguien lo pide. El tutorial del carrusel de imágenes cubre el widget en su totalidad.
Relación de aspecto y lo que la rompe
Establece 16:9 y colócalo en cada diapositiva. Las proporciones mixtas en un carrusel de video producen tarjetas de diferentes alturas y, a diferencia de una cuadrícula, donde se puede perdonar un borde inferior irregular, una franja horizontal coloca cada discrepancia directamente al lado de su vecino.
Las tarjetas de producto se encuentran con lo mismo por la misma razón, y el Guía del carrusel de productos WooCommerce cubre cómo nivelarlos.
El culpable habitual es un clip vertical en un conjunto que de otro modo sería paisajístico. Ya sea dale su propio carrusel o envuélvelo en un buzón en 16:9 con un fondo a juego. No dejes que un vídeo de 9:16 establezca la altura para once paisajes.
Esquema de vídeo
Si los videos son de tu propio contenido y son importantes para la búsqueda, agréguelos VideoObject esquema: nombre, descripción, URL en miniatura, fecha y duración de carga. Es lo que hace posibles los resultados ricos en vídeo.
Dos condiciones que la gente pasa por alto: el vídeo tiene que ser el contenido principal de la página, no la decoración, y la URL en miniatura debe poder rastrearse públicamente. Una galería de seis videos incrustados en una página de acerca de no califica para resultados ricos en videos, sin embargo, lo marca, porque el contenido principal de la página no es el video.
Preguntas frecuentes
¿elementor tiene un widget de carrusel de vídeos?
El carrusel multimedia de Elementor Pro maneja imágenes y videos en un carrusel. Elementor gratis no lo incluye. Master Addons agrega un control deslizante de galería en su nivel Pro para el diseño de vista previa más miniatura, y es un widget de imagen en lugar de un reproductor de video. El carrusel de imágenes gratuito puede sustituir a un carrusel de vídeos utilizando imágenes de carteles con una caja de luz.
¿cómo agrego un carrusel de YouTube en Elementor?
Utilice imágenes de carteles en lugar de incrustaciones en vivo. Agregue la miniatura de cada video a un carrusel, vincule la diapositiva a la URL del video y habilite la caja de luz para que se abra sobre la página. Seis iframes de YouTube en vivo en una página representan alrededor de 3 MB de JavaScript de terceros; seis imágenes de carteles son una fracción de eso.
¿por qué mi página es lenta después de agregar un carrusel de videos?
Cada incrustación en el carrusel carga su reproductor inmediatamente, incluidas las diapositivas que están fuera de la pantalla, porque un carrusel representa todas sus diapositivas. Active la opción de carga diferida o clic para reproducir del widget para que solo se cargue la imagen del póster hasta que alguien haga clic, o cambie a imágenes del póster con una caja de luz.
¿cuál es la diferencia entre un control deslizante de galería y un carrusel de imágenes?
Un control deslizante de galería tiene dos partes vinculadas: un panel de vista previa grande más una tira de miniaturas que lo navega. Un carrusel de imágenes es una sola fila de diapositivas del mismo tamaño. Utilice el control deslizante de la galería cuando los elementos merezcan una apariencia adecuada, uno a la vez; Utilice el carrusel cuando esté mostrando un conjunto.
¿cómo agrego miniaturas a un control deslizante Elementor?
Utilice el widget Gallery Slider, habilite miniaturas en la pestaña de contenido y cambie la tira de miniaturas al modo carrusel para que un conjunto largo permanezca en una línea desplazable en lugar de envolverlo en filas. Establezca la posición de vista previa, abajo, arriba, izquierda o derecha, en diseño.
¿puedo mezclar imágenes y vídeos en un carrusel de Elementor?
Sí. Media Carousel de Elementor Pro admite tipos mixtos de forma nativa. Con el Image Carousel gratuito, use imágenes de póster para los videos y vincule esas diapositivas a las URL del video, de modo que las imágenes y los videos se comporten como diapositivas y solo el video se cargue al hacer clic.
Cual para construir
Serie de cursos o tutoriales: Lista de reproducción de vídeos de Elementor Pro, porque los títulos y las duraciones funcionan. Vídeos que tienen que reproducirse en un carrusel: Media Carousel, con el modo lightbox activado. Reel de cartera o demostraciones de productos: Gallery Slider con miniaturas. Un puñado de vídeos en una página de marketing y sin licencia: Carrusel de imágenes gratuito con imágenes de carteles y una caja de luz, que también es el más rápido de los tres. Y si el vídeo solo tenía textura de fondo para una sección de héroe, el gratuito Extensión deslizante de fondo en su lugar, gira imágenes fijas, a una fracción del peso de un vídeo en bucle.
Ninguno de los veinte Creador de widgets los diseños manejan videos, por lo que este es un trabajo donde los widgets de archivo son la respuesta. Para todo lo demás en el conjunto, el página de precios muestra qué nivel se aplica y carrusel versus control deslizante primero resuelve la pregunta del formato.
Todos ellos están en el Widgets del carrusel Elementor página, y el desglose gratuito versus profesional cubre en qué nivel se encuentra cada uno.
