Cómo agregar una barra de audio “Último episodio” al encabezado de la Divica

Si aloja un sitio de podcast con DIV, hay buenas posibilidades de usar el módulo de audio construido. Ahora, si está buscando una forma especial de resaltar su último episodio, le gustará este tutorial. Hoy, le mostraremos cómo incluir una barra de audio fija para el último episodio en el encabezado de la Divic. Incluiremos una animación de bucle 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! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Descargue gratis el cabezal del encabezado de la barra de audio para poner sus manos en la plantilla de encabezado de barra de audio gratuita, primero deberá descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos! Vaya a Div Div Temo Builder y comience a crear un Builder Divine Global Access Builder, comience al acceder a Divic Builder desde Backend: su sitio de WordPress.
Comience a crear encabezado global, comience a construir un encabezado global.

Cree un encabezado global con la última barra de audio para el fondo de configuración de episodios Una vez que llegue al editor de plantillas, notará una sección. Abra esa sección y cambie el color de fondo. Combamos este encabezado global con el paquete de podcast, pero no dude en usar ningún otro tipo de estilo de diseño.

Color de fondo: # 1A1844
Extienda luego, pase a la pestaña de diseño y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.

Revestimiento superior: 50 PX (escritorio), 80 px (tableta y teléfono)
Finamiento inferior: 0 PX
Box Shadow Para separar el encabezado del contenido de la página / publicación, agregaremos una sombra de la caja y a nuestra sección.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Agregue la estructura de la columna de la fila # 1 Continuar agregando una primera fila a su sección utilizando la siguiente estructura de columna:

El color de fondo toda la fila se dedicará a nuestra última barra de audio. Pero antes de alcanzarlo, abra la configuración de línea y cambie el color de fondo.

Color de fondo: # Fe4943
Dimensión Vaya a la pestaña Diseño de fila y cambie la configuración de tamaño adicional.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 90%
Ancho máximo: 100%
Espacio agregamos un forro personalizado desde arriba y abajo.

Revestimiento superior: 10 px
Finamiento inferior: 10 PX
Border, entonces iremos a la configuración del borde y agregaremos algunas esquinas redondeadas.

En la parte inferior izquierda: 10 px
Abajo a la derecha: 10 PX
Box Shadow también incluye un tono de caja.

Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0,3)
Posición entonces, iremos a la pestaña avanzada y resolveremos toda la fila. También aumentaremos el índice de la fila Z para garantizar que se superponga la segunda fila que agregaremos a nuestra sección.

Posición: fijo
Ubicación: el centro superior
IND ÍNDICE: 11
Columna 1 Visibilidad Complete la configuración de la fila configurando los platos de la columna 1 en el oculto. Esto lo ayudará con la animación del texto que podría ver en la vista previa de esta publicación. Al establecer los derrames ocultos, nos aseguraremos de que la animación esté oculta más allá del contenedor de columna.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue un módulo de texto a la columna 1 Agregar contenido es el momento 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 Diseño del módulo y cambie la configuración de texto en consecuencia:


Texto de fuente: Abrir sans
Text -Text estilo: mayúscula
Color de texto: #ffffff
Txt Tamaño: 15 PX
Texto de la carta de espacio: 3 PX
Espacio agregaremos un margen izquierdo negativo a nuestro módulo. Esto te 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 la animación: izquierda
Duración de la animación: 9000Mimintensidad de animación: 30%
Opacidad de animación para comenzar: 100%
Curva de velocidad de animación: lineal
Repita la animación: bucle
Agregue un módulo de audio a la columna 2 Elimine todos los contenidos en la columna 2, la única forma en que necesitamos es un módulo de audio. Asegúrese de que el contenido sea eliminado.
Cargue el archivo de audio y luego cargue un archivo de audio que contenga el último episodio.

Retire el color de fondo Retire el color de fondo del módulo a continuación.

Extienda luego, pase a la pestaña de diseño y elimine algunos valores de llenado predeterminados agregando “0px” a ellos.

SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Junta izquierda: 0 PX
Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. Esta línea contendrá nuestro logotipo, menú e iconos en las redes sociales. Elija la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho máximo: 100%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue un módulo de menú a la columna 1 Seleccione el menú y luego, agregue un módulo de menú en la columna 1 y seleccione un menú de su elección.
Cargue el logotipo cargar un logotipo más.

Retire el color de fondo y luego elimine el color de fondo blanco predeterminado.

Configuración de texto del menú Vaya a la pestaña Design y modifique la configuración del texto del menú de la siguiente manera:

Menú de fuentes: abre sans

El color del texto del menú: #ffffff (escritorio), # 1A1844 (tableta y teléfono)
Menú Tamaño del texto: 15 pxalinización del texto: derecha
Configuración de texto En el menú desplegable Cambie el color de la línea de menú desplegable y en la configuración del menú desplegable.
Color de la línea desplegable del menú: #ffffff
Configuración del icono junto con el color del icono del menú de la hamburguesa en la configuración del icono.

Icono de menú de hamburguesas de color: # Fe4943
Dimensión y completaremos la configuración del módulo asignando un ancho de logotipo máximo en la configuración de tamaño.

Ancho máximo del logotipo: 65%
Agregue el módulo de seguimiento de las redes sociales a la columna 2 Agregue las redes sociales a la segunda columna de nuestra segunda fila, necesitaremos un módulo en las redes sociales. Agregue las redes sociales a su elección.

Alineación Vaya a la pestaña 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.

Margen superior: 20 PX
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. Después de haber completado el encabezado global, ¡asegúrese de guardar todo el creador de temas Div Div y ver el resultado en su sitio web!
Todas las esquinas: 50VW
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil