Cómo agregar una barra de audio fija "Último episodio" a su encabezado Divi
Publicado: 2020-05-28Si está alojando un sitio web de podcasts con Divi, es muy probable que ya esté utilizando el módulo de audio incorporado. Ahora, si está buscando una forma especial de poner su último episodio en el centro de atención, le encantará este tutorial. Hoy, le mostraremos cómo incluir una barra de audio fija del último episodio en su encabezado Divi. Incluiremos una animación de bucle de módulo de texto para llamar la atención sobre la barra de audio y también podrá descargar la plantilla de encabezado global, incluida la barra de audio.
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue la plantilla de encabezado de la barra de audio GRATIS
Para poner sus manos en la plantilla de encabezado de la barra de audio gratuita, primero deberá descargarla 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.
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.
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!
Vaya a Divi Theme Builder y comience a construir un encabezado global
Ir a Divi Theme Builder
Comience por ir al Divi Theme Builder en el backend de su sitio web de WordPress.
Comience a construir un encabezado global
Luego, comience a construir un encabezado global.
Cree un encabezado global con la barra de audio del último episodio
Configuración de la sección
Color de fondo
Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y cambie el color de fondo. Estamos haciendo coincidir este encabezado global con el paquete de diseño de podcasts, pero siéntase libre de usar cualquier otro tipo de estilo de diseño de su elección.
- Color de fondo: # 1a1844
Espaciado
Luego, pase a la pestaña de diseño y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.
- Relleno superior: 50 px (escritorio), 80 px (tableta y teléfono)
- Acolchado inferior: 0px
Sombra de la caja
Para separar el encabezado del contenido de la página / publicación, también agregaremos una sombra de cuadro a nuestra sección.
- Fuerza de desenfoque de sombra de caja: 80px
- Color de sombra: rgba (0,0,0,0.3)
Agregar fila n. ° 1
Estructura de la columna
Continúe agregando una primera fila a su sección usando la siguiente estructura de columnas:
Color de fondo
Toda esta fila estará dedicada a la barra de audio de nuestro último episodio. Pero antes de llegar a eso, abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: # fe4943
Dimensionamiento
Vaya a la pestaña de diseño de la fila y cambie la configuración de tamaño a continuación.
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ancho: 90%
- Ancho máximo: 100%
Espaciado
También estamos agregando un acolchado superior e inferior personalizado.
- Acolchado superior: 10px
- Acolchado inferior: 10px
Frontera
Luego, iremos a la configuración del borde y agregaremos algunas esquinas redondeadas.
- Abajo a la izquierda: 10px
- Abajo a la derecha: 10px
Sombra de la caja
También incluimos una sombra de caja.
- Fuerza de desenfoque de sombra de caja: 50px
- Color de sombra: rgba (0,0,0,0.3)
Posición
A continuación, iremos a la pestaña avanzada y arreglaremos toda la fila. También aumentaremos el índice z de la fila para asegurarnos de que se superponga a la segunda fila que agregaremos a nuestra sección.
- Posición: fija
- Ubicación: Top Center
- Índice Z: 11
Columna 1 Visibilidad
Complete la configuración de la fila configurando los desbordamientos de la columna 1 como ocultos. Esto ayudará con la animación del texto que pudo notar en la vista previa de esta publicación. Al configurar los desbordamientos como ocultos, nos aseguraremos de que la animación esté oculta más allá del contenedor de la columna.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar módulo de texto a la columna 1
Agregar contenido
Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Agregue una copia de su elección.
Configuración de texto
Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente de texto: Open Sans
- Estilo de fuente de texto: mayúsculas
- Color del texto: #ffffff
- Tamaño de texto: 15px
- Espaciado de letras de texto: 3px
Espaciado
También agregaremos un margen izquierdo negativo a nuestro módulo. Esto ayudará con nuestra animación de bucle.
- Margen izquierdo: -190%
Animación
Por último, pero no menos importante, agregue la siguiente animación de bucle a su módulo de texto:
- Estilo de animación: diapositiva
- Dirección de animación: izquierda
- Duración de la animación: 9000ms
- Intensidad de la animación: 30%
- Opacidad inicial de la animación: 100%
- Curva de velocidad de animación: lineal
- Repetición de animación: bucle
Agregar módulo de audio a la columna 2
Eliminar todo el contenido
En la columna 2, el único módulo que necesitamos es un módulo de audio. Asegúrese de que se elimine el contenido.
Cargar archivo de audio
Luego, cargue un archivo de audio que contenga su último episodio.
Eliminar color de fondo
A continuación, elimine el color de fondo del módulo.
Espaciado
Luego, pase a la pestaña de diseño y elimine algunos valores de relleno predeterminados agregándoles '0px'.
- Relleno superior: 0px
- Acolchado inferior: 0px
- Relleno izquierdo: 0px
Agregar fila n. ° 2
Estructura de la columna
A la siguiente fila. Esta fila contendrá nuestro logotipo, menú e íconos de redes sociales. Elija la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de fila y modifique la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Ancho de la canaleta: 1
- Ancho máximo: 100%
Espaciado
A continuación, elimine todo el acolchado superior e inferior predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Agregar módulo de menú a la columna 1
Seleccione el menú
Luego, agregue un Módulo de menú a la columna 1 y seleccione un menú de su elección.
Subir logotipo
Sube un logo a continuación.
Eliminar color de fondo
Luego, elimine el color de fondo blanco predeterminado.
Configuración del texto del menú
Vaya a la pestaña de diseño y cambie la configuración del texto del menú de la siguiente manera:
- Fuente del menú: Open Sans
- Color del texto del menú: #ffffff (escritorio), # 1a1844 (tableta y teléfono)
- Tamaño del texto del menú: 15px
- Alineación de texto: derecha
Configuración de texto del menú desplegable
También estamos cambiando el color de la línea del menú desplegable en la configuración del menú desplegable.
- Color de la línea del menú desplegable: #ffffff
Configuración de iconos
Junto con el color del icono del menú de hamburguesas en la configuración de los iconos.
- Color del icono del menú de hamburguesas: # fe4943
Dimensionamiento
Y completaremos la configuración del módulo asignando un ancho máximo de logotipo en la configuración de tamaño.
- Ancho máximo del logotipo: 65%
Agregue el módulo de seguimiento de redes sociales a la columna 2
Agregar redes sociales
En la segunda columna de nuestra segunda fila, necesitaremos un módulo de seguimiento de redes sociales. Agrega las redes sociales que prefieras.
Alineación
Vaya a la pestaña de diseño del módulo y cambie la alineación del módulo.
- Alineación del módulo: centro
Espaciado
A continuación, agregue algunos valores de margen personalizados.
- Margen superior: 20px
- Margen inferior: -4% (solo tableta y teléfono)
Frontera
Y complete el encabezado agregando algunas esquinas redondeadas a la configuración del borde del módulo. Una vez que haya completado el encabezado global, asegúrese de guardar todos los cambios de Divi Theme Builder y ver el resultado en su sitio web.
- Todos los rincones: 50vw
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo ser creativo con el módulo de audio integrado de Divi. Más específicamente, le mostramos cómo incluir una barra de audio fija en su encabezado global personalizado. Esta es una excelente manera de enfatizar el último episodio de su podcast. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.