Cómo crear una barra de contenido de audio pegajosa en Divi
Publicado: 2021-03-15Agregar una barra de contenido de audio adhesiva es una excelente manera de presentar un clip de audio para facilitar el acceso mientras el usuario se desplaza por el contenido de su página. Por ejemplo, los podcasters pueden “pegar” su audio destacado en la parte superior de la página de un episodio para que el usuario siempre pueda tener acceso a esos controles de audio mientras escucha e interactúa con el resto del contenido de la página.
En este tutorial, vamos a ser un poco creativos con las opciones de posición adhesiva incorporadas de Divi para crear una barra de contenido de audio adhesiva en Divi. Le mostraremos cómo convertir el contenido de audio existente en una página (como una fila con un módulo de audio) en una barra de contenido de audio pegajosa que permanece en la parte superior de la ventana una vez que el usuario pasa por alto el contenido de audio mientras se desplaza. Además, también le mostraremos cómo cambiar el contenido, el estilo y el diseño de la barra una vez que el estado fijo está activado (o atascado en la parte superior de la ventana). La transición fluida y la funcionalidad de este diseño ofrecen una solución única para mostrar contenido de audio en cualquier sitio web de Divi.
¡Hagámoslo!
Vistazo
Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.
A continuación, se muestra la transición del contenido de audio a una barra de contenido de audio pegajosa.
Y aquí hay un vistazo a cómo se puede interactuar con la barra de audio mientras se desplaza por la página.
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.
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!
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:
- Si aún no lo ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Cargue el paquete de diseño prediseñado de podcast desde Divi Builder
Para impulsar el diseño de nuestra barra de audio adhesiva en Divi, usaremos el diseño de la página de inicio del 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: Creación de la fila adhesiva 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 filas
Antes de agregar módulos, abra la configuración de la nueva fila y actualice lo siguiente:
- Ancho de la canaleta: 1
- Ancho: 100%
- Ancho máximo: 100%
- Relleno (escritorio): 10 píxeles en la parte superior, 10 píxeles en la parte inferior, 10% a la izquierda, 10% a la derecha
- Relleno (tableta y teléfono): 10px arriba, 10px, abajo, 10px a la izquierda, 10px a la derecha
Para hacer que la fila sea pegajosa, vaya a la pestaña avanzada y actualice lo siguiente:
- Posición adhesiva: adherirse a la parte superior
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
Agregar el 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 Blurb
A continuación, crearemos una llamada a la acción que se mostrará en el lado derecho de nuestra barra de contenido de audio adhesivo.
Para crear el CTA, copie el módulo de propaganda con el icono de reproducción en la sección superior del diseño.
Luego, pegue el módulo de propaganda duplicado debajo del módulo de audio en la segunda fila de la sección superior.
Parte 4: Estilo del contenido de audio
Diseñar el módulo de audio
Una vez que la fila hereda 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): 14px
- Altura de la línea de título (pegajosa): 1.3em
- Altura de la línea de subtítulos (pegajosa): 1.3em
Todo lo que hace es encoger el texto y espaciar un poco 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, necesitamos 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, necesitamos agregar algunos fragmentos de CSS personalizados en la configuración avanzada para alinear a la izquierda nuestro texto 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 en la pestaña adhesiva :
text-align:left;
Agregue el siguiente CSS al Audio Meta solo en la pestaña adhesiva :
text-align:left !important;
Agregue el siguiente CSS a los botones del reproductor solo en la pestaña adhesiva :
color: #fe4943;
Agregue el siguiente CSS a los controles deslizantes del reproductor actual solo en la pestaña adhesiva :
background: #2c4ca3;
Diseñando el CTA de Blurb
A continuación, vamos a diseñar nuestro módulo de propaganda que servirá como una llamada a la acción simulada 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 texto del cuerpo: 10px
- Espaciado de letras del cuerpo: 2px
- Altura de la línea del cuerpo: 1.3em
Luego, ajusta el tamaño del ícono de propaganda:
- Tamaño de fuente del icono: 50px
Luego, ajuste el tamaño del módulo de la siguiente manera:
- Ancho del 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: [agregar imagen]
- Mezcla de imagen de fondo: luminosidad
Queremos que este módulo se oculte inicialmente a la vista hasta que la fila alcance el estado fijo y la barra de control de audio esté atascada 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):
display:none;
Elemento principal CSS (pegajoso):
display:block;
CSS de la imagen de Blurb:
margin-bottom: 10px
Parte 5: Cambiar la alineación del contenido de la barra de audio en el estado fijo
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 pegajosa 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 pegajoso.
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):
display:flex; flex-direction:column;
Elemento principal (pegajoso):
display:flex; flex-direction: row; align-items:center; justify-content:center;
¡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 adhesiva utilizando las opciones de estilo adhesivo de Divi de formas avanzadas y creativas. Una de las técnicas únicas presentadas en este tutorial fue cómo alinear el contenido de una fila adhesiva usando la propiedad flex. Afortunadamente, Divi's tiene una forma conveniente de agregar fragmentos de código personalizados al estado pegajoso utilizando los bloques CSS personalizados avanzados para brindarnos la flexibilidad de diseño que necesitábamos. Con suerte, esto le dará algo de inspiración para crear uno en su próximo proyecto.
Espero tener noticias tuyas en los comentarios.
¡Salud!