Esta publicación es la parte 3 de 5 en nuestra mini serie titulada 5 formas divertidas de diseñar el módulo de audio de Divi . ¡Estén atentos esta semana para conocer los cinco ejemplos únicos del módulo de audio de Divi, con un tutorial sobre cómo lograr cada uno!
Hay todo tipo de contenido de audio que quizás desee compartir en su sitio web: sus últimas letras, instrumentales o podcasts, por ejemplo. ¡El módulo de audio incorporado de Divi hace que incluirlos sea muy fácil!
En el tutorial de hoy, le mostramos cómo diseñar el módulo de audio Divi como un reproductor de podcast.
Antes de comenzar a diseñar el módulo de audio, familiaricémonos con la función predeterminada. El aspecto limpio y minimalista sin duda sería suficiente para mostrar algunos bytes de sonido, pero siempre es una buena idea adaptar un diseño según el contexto, que es exactamente lo que vamos a hacer hoy.
Aquí está la versión predeterminada del módulo de audio Divi:
Y aquí está el concepto de diseño que vamos a construir hoy:
Simplemente siga los pasos que describo a continuación para imitar este diseño, sustituyendo los activos de imagen que mejor comunican su propia marca.
Cómo diseñar su módulo de audio Divi como un reproductor de podcast
Suscríbete a nuestro canal de Youtube
El concepto y la inspiración
Entre los movimientos raw, vegan y paleo, está claro que la gente está empezando a prestar más atención a sus dietas. Mientras me desplazaba por un sitio web de fotografía de archivo, encontré esta foto, que habló de inmediato de esas iniciativas, con su paleta de colores rústicos y su sensación de cosecha propia. Incluso si su negocio o sitio web no está centrado en la comida, el diseño y la composición de este diseño funcionan igual de bien con otros activos de imagen, así que siéntase libre de crear un tema diferente.
Preparación de los elementos de diseño
Debido a que logramos gran parte de este diseño con CSS, la cantidad de recursos de imagen que necesitamos se limita a dos. Primero está la imagen de fondo de la sección, que descargué de Unsplash aquí. Recomiendo reducir el tamaño un poco; Unsplash proporciona fotos de alta resolución que invariablemente ralentizan el tiempo de carga. Para garantizar que la imagen aún se vea bien en dispositivos retina, recomiendo reducir su tamaño a 1920 px por 1280 px en Photoshop o algún otro software de edición de imágenes.
A continuación, creé una imagen de portada de podcast simple en Adobe Photoshop, diseñada a 600 px por 600 px. Tenga en cuenta que parte del diseño depende de la repetición de imágenes, por lo que si usa una imagen de fondo diferente, asegúrese de incorporarla también en su imagen de portada.
El texto de la imagen de arriba debe agregarse en su software de edición de fotos.
Para obtener la fuente gratuita que usamos en el gráfico anterior e instalarla en su computadora, siga los siguientes pasos:
- Descargar Pacifico de Google Fonts
- Ubique el archivo descargado en su computadora.
- Descomprima o expanda la carpeta.
- Haga doble clic en «Pacifico.ttf» e instale la fuente.
- Ubíquelo en su software de edición de fotos como una opción de fuente. Es posible que deba reiniciar rápidamente su aplicación de edición de fotos antes de que aparezca.
Implementando el Diseño con Divi
El diseño que crearemos hoy se adapta mejor a un podcast sobre cocina, jardinería o productos locales, pero se puede reutilizar para cualquier cosa, desde ingeniería de software hasta viajes por el mundo, según las imágenes que elija. La característica importante a tener en cuenta es la prominencia de la imagen de portada del podcast. ¡Esto permite a los usuarios reconocer su programa la próxima vez que naveguen por la App Store!
Este diseño tiene una arquitectura básica: está compuesto por una sola sección, que alberga una fila de una sola columna que contiene solo el módulo de audio.
Ajustes de sección
La configuración de la sección es sencilla e implica solo la carga de una imagen de fondo. (Puedes encontrar la foto de la cosecha que usé aquí).
En la pestaña Configuración general de la configuración de su sección, seleccione la foto que desea usar de la carpeta Descargas local de su computadora y cárguela.
Configuración de fila
¿Recuerdas la simplicidad de la arquitectura de este diseño? Incluye solo una fila de una sola columna insertada dentro de la sección cuya imagen de fondo acabamos de establecer.
Sin embargo, hay algunas personalizaciones que queremos hacer en esta fila. Después de abrir la ventana Configuración de fila, cambie el botón junto a «Usar ancho personalizado» a «Sí». A continuación, establezca la unidad en porcentaje y arrastre el control deslizante hasta el 50 %. Esto evitará que la fila abarque todo el ancho de la ventana gráfica. Ahora, solo ocupará el 50% de su caja contenedora, en este caso, la sección con el fondo vegetal que acabamos de personalizar.
Configuración del módulo de audio
Ahora es el momento de llegar a la parte emocionante: ¡el reproductor de podcasts! Después de agregar un módulo de audio a la fila, cargue un MP3 del episodio. Sin un archivo de audio, el botón de reproducción y la barra de progreso no se mostrarán.
A continuación, complete los campos de texto en la pestaña Configuración general. Aunque los títulos del campo de texto hacen referencia a la música, podemos inferir cómo ingresar la información de nuestro podcast: en el campo Título, ingrese el nombre del episodio; en el campo Nombre del artista, ingrese el(los) nombre(s) de su anfitrión; finalmente, en el campo Nombre del álbum, ingrese el nombre del podcast; en mi caso ficticio, Two Peas in a Podcast.
Por último, desplácese un poco más hacia abajo y cargue la imagen de la portada de su podcast.
A continuación, queremos agregar algo de estilo. Comencemos con los detalles fáciles primero. Seleccione la pestaña Configuración de diseño avanzada para ajustar el color de fondo y la opacidad del cuadro que alberga su reproductor de audio. Usé un valor rgba de (126,193,32,0.82) para lograr ese color verde guisante. Sin embargo, si está utilizando diferentes activos de imagen, querrá seleccionar una paleta de colores más personalizada. Siéntase libre de alternar los controles deslizantes de tono y opacidad hasta que encuentre un color de fondo que se adapte a su marca.
El último ajuste que haremos dentro de la pestaña Configuración avanzada de diseño es la fuente; la tipografía es una oportunidad fantástica para comunicar la estética de la marca. Para Two Peas in a Podcast, seleccioné la fuente propia, Pacifico. Nuevamente, siéntase libre de seleccionar la fuente que mejor resuene con los activos de imagen que está utilizando.
Ahora es el momento de agregar algunas líneas de código en la pestaña CSS personalizado. Primero, agregaremos una sutil sombra paralela al cuadro verde que contiene nuestro reproductor de audio. Para hacer esto, desplácese hacia abajo hasta el campo de texto etiquetado como «Elemento principal» y pegue el siguiente fragmento:
|
01
|
box-shadow: 5px 5px 5px #2c2c2c; |
Puede jugar con los valores para ajustar el tamaño, la dirección, la opacidad y el tono de su sombra paralela.
Finalmente, vamos a personalizar la forma de la imagen de la “portada del álbum”. (Tenga en cuenta que, en nuestro diseño, esta imagen debería ser la portada de su podcast). Dentro de la pestaña CSS personalizado del reproductor de audio, desplácese hacia abajo hasta el campo de texto titulado «Carátula de audio» y pegue lo siguiente:
|
01
02
|
-webkit-clip-path: circle(40% at 50% 50%);clip-path: circle(40% at 50% 50%); |
Esto revelará solo las partes de la imagen que están dentro de los parámetros que establecimos, haciendo que se vea como un círculo.
Cuando haya terminado, haga clic en Guardar y salir.
¡Felicitaciones, con algunas personalizaciones integradas y un par de fragmentos de CSS, ha creado la manera perfecta de comercializar sus últimos episodios de podcast!
Tomorrow: Part 4 – Rocking Color Blocking con el Divi Audio Module
Únase a nosotros mañana para la próxima instalación de nuestra serie, en la que le mostraré cómo personalizar el módulo de audio para crear un diseño de pantalla dividida de contraste medio a través del cual compartir música y elogios de la crítica.
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!