Thumbnail Track vs Dot Navigation es una de esas cosas que debemos considerar al agregar un módulo Video Slider a nuestros diseños Divi. Ambas son buenas opciones, pero cada una es más adecuada para ciertas situaciones. En este artículo, veremos el uso de Thumbnail Track vs Dot Navigation en el módulo Video Slider de Divi para ayudarlo a decidir cuál usar en su situación.
La pista de miniaturas y la navegación de puntos facilitan la navegación a través de las diapositivas de video dentro del módulo Divi Video Slider. Ambos muestran el video actual dentro del reproductor de video, pero su navegación es muy diferente.
Ambos tipos de navegación funcionan bien, pero hay momentos en que uno es una mejor opción que el otro. Exploraremos esta idea a medida que avanzamos. El siguiente ejemplo muestra ambos tipos de navegación.
Es fácil cambiar entre la pista de miniaturas y la navegación de puntos. Habilite Visual Builder en la parte superior de la pantalla. Pase el cursor sobre el módulo Control deslizante de video y haga clic en el icono de engranaje gris.
Desplácese hacia abajo hasta Elementos . Verá una configuración llamada Controles deslizantes que incluye un cuadro desplegable. Este menú desplegable contiene ambas opciones de navegación. Simplemente haga clic en la opción que desee. Usar pista de miniaturas es la configuración predeterminada. Esa es la navegación que se ve en la imagen de abajo.
Controles deslizantes:
- Usar pista de miniaturas
- Utilice la navegación de puntos
Ahora he seleccionado Usar navegación de puntos . Se eliminaron las miniaturas y ahora aparecen puntos en la imagen del video.
Una mirada a la pista en miniatura
Pista de miniaturas muestra una imagen en miniatura de las diapositivas debajo del reproductor de video. Al pasar el cursor sobre una miniatura, se muestra el icono de reproducción y se muestran las flechas izquierda y derecha. Estoy pasando el cursor sobre la segunda miniatura desde la izquierda en este ejemplo.
Al hacer clic en una miniatura, se muestra ese video en el reproductor de video. La miniatura del video actual muestra una superposición.
Al hacer clic en una flecha en la Pista de miniaturas, las miniaturas se desplazan al conjunto de miniaturas anterior o siguiente. Esto permite a los usuarios ver fácilmente las miniaturas y elegir su video en el Video Slider.
Usted tiene control sobre la superposición de la pista de miniaturas y el color de control. Elija cualquier color para el Color de superposición de miniaturas . Seleccione entre las opciones Claro y Oscuro para el Color de los controles deslizantes .
- Color de superposición de miniaturas: elija un color personalizado
- Color de los controles deslizantes: elija claro u oscuro
Cuándo usar la pista de miniaturas
Como Thumbnail Track muestra imágenes, es mejor usarlo en una página, o dentro de una ubicación en una página, que no tiene muchas imágenes. Úsalo con espacios en blanco. Es ideal cuando desea llamar la atención sobre las diapositivas.
Donde la pista de miniaturas es ideal
Aquí hay un par de ejemplos. Funciona bien en los ejemplos a continuación porque no hay muchas imágenes en el área que lo rodea y tiene suficiente espacio en blanco para separarlo de los otros elementos.
En este ejemplo, estoy usando la página Habitación en el paquete gratuito de diseño de Bed and Breakfast . Reemplacé el módulo de video y los módulos de imagen con un solo módulo de control deslizante de video. Este es el uso perfecto del módulo Video Slider con Thumbnail Track. Las miniaturas muestran qué son las diapositivas, por lo que el visitante puede ver fácilmente la sala que le interesa.
Dot Navigation no es ideal para este diseño. No llama la atención las habitaciones, que es el objetivo de esta página.
En el siguiente ejemplo, coloqué el módulo Control deslizante de video con la pista de miniaturas dentro de la página de inicio del paquete de diseño de Consultor gratuito que está disponible en Divi . Hay un espacio en blanco entre el Video Slider y los módulos arriba y abajo. El módulo tiene todo el ancho del diseño, por lo que hay suficiente ancho de pantalla para las miniaturas de navegación.
La Navegación de puntos también funciona bien aquí, pero no llama la atención sobre las diapositivas de video. Necesita más información, como un título para describirlo.
Donde la pista de miniaturas no es ideal
Thumbnail Track no es ideal cuando no hay mucho espacio para las miniaturas y hay muchas imágenes a su alrededor.
En este ejemplo, moví el módulo Video Slider a una pequeña columna al lado de una imagen con gráficos. El control deslizante de video se ve bien aquí, pero las miniaturas son difíciles de ver. El control deslizante de video se pierde en las imágenes, por lo que esta no es una ubicación en la que le gustaría colocarlo si desea llamar la atención sobre los videos.
Dot Navigation encaja bien aquí. Tiene un diseño minimalista que no quita los elementos que lo rodean. Esta es una buena opción si desea utilizar los videos como elementos de apoyo más pequeños.
La navegación de puntos agrega un punto a la imagen destacada para cada diapositiva. El punto de la diapositiva actual es más brillante que los demás.
Al hacer clic en un punto, se selecciona el video de ese punto. En el siguiente ejemplo, he seleccionado el último punto. El reproductor de video ahora muestra la imagen de esa diapositiva de video. Estoy sobre la imagen de video, que muestra una superposición y hace que los puntos sean más fáciles de ver con mi combinación de colores.
Puede elegir entre colores claros y oscuros para los puntos. Esto le permite hacer que los puntos sean más visibles según los colores o las superposiciones de las imágenes destacadas de su video. He seleccionado la opción oscura para el siguiente ejemplo.
- Color de los controles deslizantes: elija claro u oscuro
Dot Navigation es ideal, las diapositivas en el control deslizante de video no son el foco principal, o cuando desea mantener la página libre de desorden visual. Mantiene la página simple, pero sigue siendo fácil navegar entre las diapositivas.
Donde la navegación por puntos es ideal
Aquí hay algunos ejemplos de navegación por puntos. Funciona bien donde no hay mucho espacio, desea mantener la página limpia o el objetivo no es llamar la atención sobre cada video en el Control deslizante de video.
Para este ejemplo, agregué un módulo Control deslizante de video a la sección Testimonios. Esta sección incluye varios testimonios escritos junto con el Video Slider. El objetivo de esta página es promocionar los servicios. Los videos son solo un tipo de testimonio para ayudar a respaldar la venta. No hay necesidad de llamar la atención sobre cada diapositiva. El usuario puede ver tantos como quiera. Estoy usando la página de inicio para el paquete de diseño de pisos gratuito .
Thumbnail Track se ve bien, pero podría distraer en este diseño y no es necesario según el propósito de la página. No queremos que nuestros testimonios distraigan nuestra llamada a la acción.
Aquí hay otro ejemplo. Este utiliza la página de blog del paquete de diseño de Blogger gratuito. Reemplacé el módulo de publicación de blog con un módulo de control deslizante de video. Este ejemplo incluye muchas diapositivas de video e imágenes alrededor del control deslizante. El diseño se ve limpio y fácil de navegar. El objetivo no es centrarse en cada publicación, sino brindarle al usuario una forma de verlas si así lo desea.
La pista de miniaturas todavía se ve bien aquí, pero la página se llena demasiado con muchas diapositivas.
Donde la navegación por puntos no es ideal
Dot Navigation no es ideal cuando queremos llamar la atención sobre las diapositivas de video. Para este ejemplo, estoy usando la página de destino para el Paquete de diseño de tienda de ropa gratuito . Reemplacé las imágenes de productos de WooCommerce en la sección Novedades con un Control deslizante de video. En este caso, queremos ver los nuevos productos. El área alrededor del control deslizante está vacía. Este diseño de página no es ideal para las conversiones.
La pista de miniaturas funciona mejor aquí. El foco está en los productos, que es donde lo queremos.
Ese es nuestro vistazo a la pista de miniaturas frente a la navegación de puntos en el módulo de control deslizante de video de Divi. Ambos tipos de navegación funcionan bien, pero es mejor usarlos en sus situaciones ideales. Hay momentos en que uno funciona mejor para nuestros diseños. En general, puede pensar en Thumbnail Track vs Dot Navigation con estas ideas básicas:
- Use Pista de miniaturas para áreas más grandes o para llamar la atención sobre las diapositivas de video.
- Use Navegación de puntos para áreas más pequeñas o cuando desee mantener limpio el diseño.
Queremos escuchar de ti. ¿Prefieres la pista de miniaturas o la navegación por puntos? Háganos saber en los comentarios.