Cómo crear un conmutador personalizado para transcripciones de video en Divi

Agregar un interruptor personalizado para las transcripciones de sus videos 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 aquellos que son sordos, 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 conmutador personalizado para la transcripción de un video también es bueno porque puede mantener oculto ese contenido de formato largo hasta que sea necesario.

En este tutorial, crearemos un conmutador personalizado (y compacto) para transcripciones de video en Divi. Para hacer esto, vamos a personalizar el módulo de alternancia de Divi con un cambio de imagen conciso para que se ajuste perfectamente a cualquier video. Luego, le mostraremos cómo usar la transcripción generada automáticamente de Youtube como contenido para el interruptor. Todo esto sin tener que utilizar un plugin.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

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:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Creación de 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, vamos a agregar / incrustar 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 de agregar video más debajo de la opción “Archivo de video MP4 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 superpuesta personalizada al video.

Parte 1: Crear el conmutador personalizado para la transcripción

Ahora que nuestro video está en su lugar, podemos crear el interruptor personalizado que mantendrá nuestro contenido de transcripción. Para hacer esto, vamos a personalizar un módulo de alternancia.

Primero, agregue un módulo de alternancia directamente debajo del video.

En la configuración de alternancia, agregue la palabra "Transcripción" para el texto del título. (Regresaremos al contenido del cuerpo más tarde para pegar el contenido de la transcripción de nuestro video de YouTube más adelante)

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: # 42b3a9
• Abrir alternar color de fondo: transparente
• Color de fondo de alternancia 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 :

display:inline-block;
padding: 1em 2.5em 1em 2em !important;

Agregue el siguiente CSS al ícono de alternar :

right: 0.75em !important;

Agregue el siguiente CSS al contenido de alternancia :

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, usaremos 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, vaya a su video en Youtube y siga estos pasos:

1. Abra el menú desplegable Más acciones (3 puntos horizontales) junto al botón Guardar debajo del video.
2. Haga clic en Abrir transcripción en la lista.
3. En la parte superior del cuadro Transcripción, abra el menú desplegable Más acciones (3 puntos verticales).
4. 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 alternancia y pegue el contenido de la transcripción en el módulo.

Por supuesto, 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 nuestro cambio personalizado para una transcripción de video en Divi.

En el escritorio ...

En tableta…

Y en el teléfono ...

Pensamientos finales

En este tutorial, le mostramos cómo transformar un módulo de alternancia Divi en una alternancia personalizada para transcripciones de video en Divi. El diseño excepcionalmente conciso del conmutador solo tiene aplicaciones que se extienden más allá de las transcripciones de video. Quiero decir, 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, siéntase libre de explorar otras opciones para transcribir su contenido de video y / o compartir algunas con nosotros.

Espero tener noticias tuyas en los comentarios.

¡Salud!