Cómo crear una barra de contenido de audio pegajosa en Divi

Vistazo

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

Aquí hay un vistazo a la transición del contenido de audio a una barra de contenido de audio fija.

Y aquí hay un vistazo a cómo uno podría interactuar con la barra de audio mientras se desplaza por la página.

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.

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 has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

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

Parte 1: cargue el paquete de diseño prefabricado de podcast desde Divi Builder

Para impulsar el diseño de nuestra barra de audio pegajosa en Divi, utilizaremos el diseño de página de inicio de podcast prefabricado. En el menú de configuración, seleccione el icono más «Cargar desde biblioteca». Luego busque el diseño de la página de destino del podcast y cárguelo en la página.

Parte 2: Crear la fila fija para contener el contenido de audio

En la sección superior del diseño prefabricado, busque la fila dentro de esa sección superior. Luego agregue una nueva fila de una columna debajo de la fila existente.

Configuración de fila

Antes de agregar cualquier módulo, abra la configuración de la nueva fila y actualice lo siguiente:

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno (escritorio): 10 px arriba, 10 px, abajo, 10 % a la izquierda, 10 % a la derecha
• Relleno (tableta y teléfono): 10 px arriba, 10 px, abajo, 10 px a la izquierda, 10 px a la derecha

Para hacer que la fila sea fija, vaya a la pestaña avanzada y actualice lo siguiente:

• Posición pegajosa: Stick to Top

Esto hará que la fila (que pronto será nuestra barra de contenido de audio) se adhiera a la parte superior de la ventana del navegador al desplazarse hacia abajo en la página.

Parte 3: agregar el contenido de audio

Adición del módulo de audio a la fila

A continuación, mueva/arrastre el módulo de audio existente (prediseñado) desde la primera fila en la sección superior a la nueva fila que acaba de crear. Esto servirá como el audio destacado que incluiremos dentro del reproductor de audio adhesivo.

Agregar una llamada a la acción usando un módulo de Blurb

A continuación, crearemos un CTA que se mostrará en el lado derecho de nuestra barra de contenido de audio fijo.

Para crear el CTA, copie el módulo de publicidad con el ícono de reproducción en la sección superior del diseño.

Luego, pegue el módulo publicitario duplicado debajo del módulo de audio en la segunda fila de la sección superior.

Parte 4: Diseñar el contenido de audio

Dar estilo al módulo de audio

Una vez que la fila herede la posición fija, queremos tener un estilo diferente para nuestro módulo de audio. Para hacer esto, abra la configuración del módulo de audio y actualice las siguientes opciones de estado fijo:

• Tamaño del texto del título (adhesivo): 14 px
• Altura de la línea de título (pegajosa): 1,3 em
• Altura de la línea de subtítulos (pegajosa): 1,3 em

Todo lo que esto hace es reducir un poco el texto y el espacio para que el contenido de audio no ocupe mucho espacio vertical en nuestra barra adhesiva.

A continuación, queremos cambiar el ancho del módulo de audio en el estado fijo de la siguiente manera:

• Ancho (escritorio): 80%
• Ancho (pegajoso): 100%
• Ancho máximo (pegajoso): 100%

A continuación, debemos ajustar el espaciado del módulo de audio de la siguiente manera:

• Margen: 0px arriba, 0px abajo
• Relleno: 0px arriba, 0px abajo, 0px izquierda, 20px derecha

Finalmente, debemos agregar algunos fragmentos de CSS personalizados en la configuración avanzada para alinear nuestro texto a la izquierda y agregar colores únicos a nuestro botón y control deslizante del reproductor de audio.

Agregue el siguiente CSS al título de audio solo debajo de la pestaña adhesiva :

Agregue el siguiente CSS al Audio Meta solo debajo de la pestaña adhesiva :

Agregue el siguiente CSS a los botones del reproductor solo debajo de la pestaña adhesiva :

Agregue el siguiente CSS a Player Sliders Current  solo debajo de la pestaña adhesiva :

Dar estilo a la llamada a la acción de Blurb

A continuación, vamos a diseñar nuestro módulo de publicidad que servirá como un CTA simulado para ver todos los episodios.

Primero, agregue el texto «Todos los episodios» al contenido del cuerpo de la propaganda.

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

• Fuente del cuerpo: Lato
• Peso de la fuente del cuerpo: Negrita
• Estilo de fuente del cuerpo: TT
• Tamaño del cuerpo del texto: 10px
• Espaciado entre letras del cuerpo: 2px
• Altura de la línea del cuerpo: 1,3 em

Luego ajusta el tamaño del icono de la publicidad:

• Tamaño de fuente del icono: 50 px

Luego ajuste el tamaño del módulo de la siguiente manera:

• Ancho de contenido: 100%
• Ancho: 20%

Ahora regrese a la pestaña de contenido y agregue un fondo para la propaganda de la siguiente manera:

• Color de fondo: #1a1844
• Imagen de fondo: [añadir imagen]
• Mezcla de imagen de fondo: luminosidad

Queremos que este módulo se oculte inicialmente de la vista hasta que la fila alcance el estado permanente y la barra de control de audio se atasque en la parte superior de la ventana. Para hacer esto, podemos agregar algunos fragmentos de css que ocultan el módulo en el escritorio y muestran el módulo en estado fijo.

En la pestaña Avanzado, actualice el siguiente CSS personalizado:

Elemento principal CSS (escritorio):

Elemento principal CSS (adhesivo):

Imagen de Blurb CSS:

Parte 5: Cambiar la alineación del contenido de la barra de audio en el estado permanente

En este momento, la fila adhesiva tiene solo una columna con dos módulos apilados uno encima del otro. Entonces, la barra adhesiva mostraría la propaganda de CTA debajo del módulo de audio. Esto ocuparía demasiado espacio vertical para una barra adhesiva y no se vería muy bien.

Para asegurarnos de que todo esté alineado horizontal y verticalmente dentro de la columna, nosotros. puede usar la propiedad CSS flex para ajustar el diseño de nuestros módulos en el estado fijo.

Para hacer esto, abra la configuración de la columna que contiene ambos módulos.

En la pestaña avanzada, agregue el siguiente CSS personalizado al elemento principal

Elemento principal (escritorio):

Elemento principal (pegajoso):

¡Eso es todo! Repasemos los resultados.

Resultado final

Aquí está el diseño en el escritorio una vez que la fila está en estado fijo.

Y aquí está el diseño en el móvil.

Y aquí hay algunos videoclips de cómo funciona la magia de la barra adhesiva de contenido de audio en una página en vivo.

Pensamientos finales

Las opciones de posición fija de Divi pueden ser una herramienta poderosa para los diseñadores web. En este tutorial, le mostramos cómo crear una barra de contenido de audio fijo usando las opciones de estilo de Divi de forma avanzada y creativa. Una de las técnicas únicas presentadas en este tutorial fue cómo alinear el contenido de una fila fija usando la propiedad flex. Afortunadamente, Divi’s tiene una manera conveniente de agregar fragmentos de código personalizados al estado fijo utilizando los bloques CSS personalizados avanzados para brindarnos la flexibilidad de diseño que necesitábamos. Con suerte, esto te dará algo de inspiración para crear uno en tu próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!