Si está alojando un sitio web de podcast 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 podrá descargar la plantilla de encabezado global, ¡incluida la barra de audio también!
Hagámoslo.
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 barra de audio gratuita, primero deberá descargarla 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!
Vaya a Divi Theme Builder y comience a crear un encabezado global
Ir al Creador de temas Divi
Comience yendo a Divi Theme Builder en el backend de su sitio web de WordPress.
Empezar a construir encabezado global
Luego, comience a crear un encabezado global.
Crear encabezado global con la última barra de audio del episodio
Ajustes de sección
Color de fondo
Una vez dentro del editor de plantillas, verás una sección. Abre esa sección y cambia el color de fondo. Estamos haciendo coincidir este encabezado global con el paquete de diseño de podcast , 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)
- Relleno 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 cuadro: 80px
- Color de sombra: rgba(0,0,0,0.3)
Añadir Fila #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
Pase 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 del canalón: 1
- Ancho: 90%
- Ancho máximo: 100%
Espaciado
También estamos agregando algunos rellenos superiores e inferiores personalizados.
- Relleno superior: 10px
- Relleno inferior: 10px
Borde
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 estamos incluyendo una sombra de caja.
- Fuerza de desenfoque de sombra de cuadro: 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: Centro superior
- Í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 de 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 alguna copia de su elección.
Configuración de texto
Pase 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 entre 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 en 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 animación: 30%
- Opacidad inicial de 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.
Subir archivo de audio
Luego, cargue un archivo de audio que contenga su último episodio.
Eliminar color de fondo
Elimine el color de fondo del módulo a continuación.
Espaciado
Luego, pase a la pestaña de diseño y elimine algunos valores de relleno predeterminados agregándoles ‘0px’.
- Relleno superior: 0px
- Relleno inferior: 0px
- Relleno izquierdo: 0px
Añadir Fila #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 columna:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila y modifique la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Seleccione el menú
Luego, agregue un módulo de menú a la columna 1 y seleccione un menú de su elección.
Cargar logotipo
Cargue un logotipo a continuación.
Eliminar color de fondo
Luego, elimine el color de fondo blanco predeterminado.
Configuración del texto del menú
Pase 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
Ajustes 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 ícono del menú de hamburguesas en la configuración de los íconos.
- 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 %
Añadir Redes Sociales
En la segunda columna de nuestra segunda fila, necesitaremos un módulo de seguimiento de redes sociales. Agrega las redes sociales de tu preferencia.
Alineación
Pase 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
Agregue algunos valores de margen personalizados a continuación.
- Margen superior: 20px
- Margen inferior: -4 % (solo tableta y teléfono)
Borde
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.
- Todas las esquinas: 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 de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.