Agregar un conmutador personalizado para sus transcripciones de video puede traer muchos beneficios a su sitio web. De hecho, simplemente incluir una transcripción de video para cada video en su sitio web puede mejorar la experiencia del usuario, la accesibilidad y el SEO. Los usuarios tendrán la opción de leer el contenido, que es una gran característica de accesibilidad para las personas sordas, con problemas de audición o en una cafetería ruidosa. Y puede leer las transcripciones más rápido que ver el video (o los subtítulos del video). Además, el contenido agregado probablemente incluirá una cantidad significativa de palabras clave que mejorarían el SEO. Crear un interruptor personalizado para una transcripción de video también es bueno porque puede mantener oculto el contenido de formato largo hasta que se necesite.
En este tutorial, vamos a crear un conmutador personalizado (y compacto) para transcripciones de video en Divi . Para hacer esto, vamos a personalizar el módulo de alternar de Divi con un cambio de imagen conciso para que encaje bien debajo de cualquier video. Luego, le mostraremos cómo usar la transcripción generada automáticamente de Youtube como contenido para la alternancia. Todo ello sin necesidad de utilizar ningún tipo de plugin de Youtube .
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
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?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Crear un conmutador personalizado para transcripciones de video en Divi
Parte 1: agregar un video de Youtube a la página usando un módulo de video Divi
Para la primera parte de nuestro tutorial, agregaremos/incrustaremos un video de YouTube en una página usando un módulo de video en el constructor Divi. Este proceso es realmente bastante simple.
Pero antes de agregar el video, agreguemos una fila de una columna a la sección.
A continuación, agregue un módulo de video a la fila.
Haga clic en el ícono Agregar video más debajo de la opción «Archivo MP4 de video o URL de Youtube».
Luego seleccione la acción Insertar desde URL en la barra lateral izquierda de la ventana emergente.
Pegue la URL del video de YouTube en el cuadro de entrada.
Luego haga clic en el botón Insertar en la publicación .
Una vez que se agrega el video, puede agregar una imagen de superposición personalizada al video.
Parte 1: Crear el conmutador personalizado para la transcripción
Ahora que nuestro video está en su lugar, podemos crear el conmutador personalizado que mantendrá el contenido de nuestra transcripción. Para hacer esto, vamos a personalizar un módulo de alternancia.
Primero, agregue un módulo de alternar directamente debajo del video.
En la configuración de alternar, agregue la palabra «Transcripción» para el texto del título. (Volveremos al contenido del cuerpo más tarde para pegarlo en nuestro contenido de transcripción de video de YouTube más adelante)
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: #42b3a9
- Color de fondo de alternancia abierta: transparente
- Color de fondo de palanca cerrada: transparente
- Alineación de texto: Centro
- Fuente del título: Roboto
- Estilo de fuente del título: TT
- Ancho máximo: 800px
- Alineación del módulo: Centro
- Relleno: 0px arriba, 20px abajo, 0px izquierda, 0px derecha
- Ancho del borde: 0px
En la pestaña Avanzado, debemos agregar algunos fragmentos de CSS para finalizar el diseño de la palanca.
Agregue el siguiente CSS al Título de alternancia :
|
01
02
|
display:inline-block;padding: 1em 2.5em 1em 2em !important; |
Agregue el siguiente CSS al ícono de alternancia :
|
01
|
right: 0.75em !important; |
Agregue el siguiente CSS al contenido de alternancia :
|
01
02
03
04
05
06
07
|
max-height: 30vh;overflow-y: scroll;padding: 20px 3%;background: #ffffff;border: 2px solid #eeeeee;border-radius: 5px;text-align:left; |
Parte 3: obtener la transcripción de Youtube y agregarla al contenido de alternancia
Crear transcripciones para videos puede ser un poco complicado de hacer manualmente. Y existen servicios y complementos que pueden hacerlo de una manera más profesional (algunos a un costo superior). Pero para este tutorial, vamos a utilizar un método rápido, fácil y gratuito. Vamos a extraer la transcripción generada automáticamente por Youtube para un video y la usaremos en nuestro sitio web.
Para hacer esto, ve a tu video en Youtube y sigue estos pasos:
- Abra el menú desplegable Más acciones (3 puntos horizontales) junto al botón Guardar debajo del video.
- Haga clic en Abrir transcripción de la lista.
- En la parte superior del cuadro Transcripción, abra el menú desplegable Más acciones (3 puntos verticales).
- Haga clic en Alternar marcas de tiempo. Esto ocultará las marcas de tiempo para que no se muestren a la izquierda de cada bloque de texto.
Copie todo el contenido de la transcripción dentro del cuadro a su portapapeles.
En este momento, el texto está lleno de saltos de línea. Para eliminarlos, puede ir a textfixer.com y usar su herramienta gratuita de eliminación de saltos de línea para eliminar los saltos de línea del texto.
En la sección Eliminar saltos de línea, seleccione «Eliminar solo saltos de línea».
Luego pegue el texto de la transcripción dentro del cuadro.
Y haga clic en el botón Eliminar saltos de línea.
Una vez que se genera el texto en la sección titulada Nuevo texto sin saltos de línea, copie el texto en el portapapeles.
Regrese a su sitio, abra la configuración de alternar y pegue el contenido de la transcripción en el módulo.
De acuerdo, el texto de la transcripción carece de un montón de letras mayúsculas, puntuación, párrafos, etc. Pero el contenido está ahí y es legible. Sin embargo, es posible que desee dedicar unos minutos a limpiar el texto para sus lectores.
¡Eso es todo!
Resultado final
Aquí está el resultado final de nuestra alternancia personalizada para una transcripción de video en Divi.
En el escritorio…
En tableta…
Y en Teléfono…
Pensamientos finales
En este tutorial, le mostramos cómo transformar un módulo de alternancia de Divi en un alternador personalizado para transcripciones de video en Divi. El diseño excepcionalmente conciso del conmutador tiene aplicaciones que se extienden más allá de las transcripciones de video. Quiero decir que literalmente puedes poner cualquier texto que quieras allí. Pero creo que encaja muy bien debajo de un video. Además, usar esas transcripciones generadas automáticamente para un video de YouTube definitivamente puede ser útil si necesita una solución simple. Pero no dude en explorar otras opciones para transcribir el contenido de su video y/o compartir algunas con nosotros.
Espero escuchar de usted en los comentarios.
¡Salud!