Los controles deslizantes de video son excelentes para mostrar una colección de videos para un curso, una página de recetas o tutoriales. También son un buen candidato para mostrar contenido premium para miembros o suscriptores de su sitio. Por ejemplo, un visitante podría aterrizar en una página de recetas y solo ver las instrucciones en formato de texto. Sin embargo, una vez que se conviertan en usuarios registrados, verán un control deslizante de video en esa misma página como contenido premium. En este tutorial, le mostraremos lo fácil que es ocultar/mostrar un control deslizante de video según el estado de inicio de sesión con Divi . Esto le permite brindar contenido de video a los usuarios registrados como una función premium.
¡Vamos a sumergirnos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial. Observe cómo el control deslizante de video está oculto para los usuarios hasta que inician sesión utilizando el formulario de inicio de sesión.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Mostrar/ocultar un control deslizante de video según el estado de inicio de sesión con Divi
Crear una nueva página con un diseño prefabricado
Comencemos con nuestro tutorial poniendo en marcha una nueva página con uno de nuestros diseños prefabricados.
Aquí está cómo hacerlo:
- Crea una nueva página y dale un título.
- Haga clic para usar Divi Builder (en la parte frontal)
- Seleccionar para usar un diseño prefabricado
- Busque y seleccione el diseño de la página de recetas del dietista .
- Para cargar el diseño en la página, simplemente haga clic en el botón «Usar este diseño».
Una vez que el diseño se haya cargado en la página, estará listo para agregar el control deslizante de video fijo a la página.
Agregar el control deslizante de video a la página
En la página de recetas, verá un video de ancho completo en una fila justo debajo de la fila con los ingredientes y las instrucciones. Vamos a reemplazar el video con un módulo deslizante de video. Para hacer eso, elimine el módulo de video.
Luego agregue un nuevo módulo deslizante de video en su lugar.
Agregar videos al control deslizante
Para agregar videos al control deslizante, abra la configuración del control deslizante de video. En la pestaña de contenido, verá un video simulado que ya está en su lugar. Abra la configuración del video existente.
A continuación, elimine el video predeterminado y haga clic en el icono Agregar video para agregar un nuevo video al control deslizante.
Para este ejemplo, estoy agregando un video autohospedado. Siempre es una buena idea cargar una versión MP4 y Webm del archivo de video.
A continuación, podemos agregar una superposición de imágenes al video.
Una vez hecho esto, guarde los cambios.
Para crear videos adicionales, vuelva a la configuración del control deslizante de video y duplique el video existente 3 veces para obtener un total de 4 videos. Luego, en la opción de superposición, cambie SÍ para mostrar superposiciones de imágenes en el video principal.
Agregar la opción de visualización condicional
Para este tutorial, mostraremos este control deslizante de video solo a los usuarios que hayan iniciado sesión. Para hacer esto, vaya a la pestaña avanzada y haga clic para agregar una nueva condición en el grupo de opciones de condiciones.
En el menú desplegable de condiciones de visualización, seleccione Estado de inicio de sesión de la lista. Asegúrese de seleccionar mostrar solo si el usuario ha iniciado sesión . Luego guarde los cambios.
Sugerencia adicional: cree una CTA o un formulario de inicio de sesión para los usuarios que no han iniciado sesión
Para los nuevos visitantes, probablemente querrás crear algún tipo de CTA para registrarse o un formulario de inicio de sesión para facilitar que los miembros inicien sesión y vean los videos. Para hacer esto, puede crear una nueva fila de dos columnas con una imagen que parece un video en la columna izquierda y un formulario de inicio de sesión en la columna derecha como en la captura de pantalla a continuación.
Luego abra la configuración de la fila y agregue una condición de visualización basada en el estado de inicio de sesión. Solo que esta vez, seleccione mostrar solo si el usuario está desconectado . Esto mostrará el contenido a los usuarios solo si están desconectados.
Al agregar el formulario de inicio de sesión, asegúrese de actualizar la opción de redirección para redirigir a la página actual . Esto mejorará la UX para los usuarios que quieran iniciar sesión y ver los videos en la misma página.
Para aprender cómo crear una sección CTA para usuarios que no han iniciado sesión desde cero, consulte nuestra publicación sobre cómo crear publicaciones de blog exclusivas para miembros con las opciones de condición de Divi .
Resultados finales
Aquí hay un vistazo a nuestros controles deslizantes de video finales. Observe cómo están ocultos para los usuarios hasta que inician sesión utilizando el formulario de inicio de sesión.
El problema con los videos/incrustaciones de YouTube usando las superposiciones de imágenes en el video principal
Si está utilizando una URL de YouTube para incrustar varios videos en el control deslizante de video, es mejor no usar la opción integrada de Divi para «Mostrar superposiciones de imágenes en el video principal». Esto hará que el audio del video se reproduzca automáticamente desde el principio en el estado fijo, lo que provocará la reproducción duplicada del audio en diferentes intervalos.
Este no es el caso de los videos autohospedados en formato de archivo mp4 o webm. Puede mostrar superposiciones de imágenes en el video principal para videos autohospedados. Entonces, si desea utilizar la imagen superpuesta de Divi y el ícono de reproducción con el módulo de video Divi, debe agregar URL/archivos de video MP4 y Webm en su lugar.
Dicho esto, aún puede agregar superposiciones de imágenes personalizadas a sus videos de Youtube en el control deslizante de video. Seguirán apareciendo en los controles de miniaturas debajo del video principal.
Pensamientos finales
Tener la capacidad de mostrar/ocultar controles deslizantes de video según el estado de inicio de sesión puede ser útil cuando desea ofrecer contenido premium a miembros o suscriptores.
Para obtener más información, consulte una publicación similar sobre cómo crear publicaciones de blog exclusivas para miembros con las opciones de condición de Divi .
Espero escuchar de usted en los comentarios.
¡Salud!