Esta publicación es la parte 5 de 5 de nuestra miniserie titulada 5 formas divertidas de diseñar el módulo de audio de Divi . Gracias por seguirnos. ¡Estén atentos a nuestra próxima miniserie llena de bondad de diseño Divi!
Para aquellos de ustedes que son músicos, la inclusión de audio en su sitio web personal es fundamental. Afortunadamente, el tema Divi viene con un módulo de audio fácil de usar que puedes agregar a tu página de inicio (o cualquier página) para compartir tus últimas pistas con los visitantes.
Hoy, vamos a diseñar una sección de audio «Heavy Metal» de tres columnas que incluye espacio para un reproductor de audio, una breve biografía y un botón de llamado a la acción, en caso de que desee dirigir a los visitantes a i-Tunes o Google Play para descargar tus últimos éxitos.
Debido a que este tutorial incluye varios módulos, es importante mirar primero el módulo de audio de forma independiente. Esto no solo lo familiarizará con las funciones y los metadatos incluidos en el diseño estándar, sino que también servirá como un estándar útil con el que comparar nuestro diseño mejorado.
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:
Solo sigue los pasos que describo a continuación para imitar este diseño. Como siempre, eres libre de usar diferentes activos de imagen. En este ejemplo, estoy construyendo mi diseño basado en la banda ficticia de heavy metal, HarmOni.
Cómo crear una sección de audio «Heavy Metal» temática de tres columnas con el módulo de audio de Divi
Suscríbete a nuestro canal de Youtube
El concepto y la inspiración
No me malinterpretes. Me encanta algo de RBG saturado de vez en cuando, pero no hay nada como el buen blanco y negro. Por supuesto, llevé esa paleta de colores al extremo al adoptar una estética macabra. Para su diseño, aligere el estado de ánimo con los recursos fotográficos de su elección.
Preparación de los elementos de diseño
Gracias a las herramientas de personalización integradas de Divi, este diseño solo requiere un recurso de imagen: la imagen de fondo de la sección. Usé una foto que encontré en Unsplash, que puedes descargar aquí . Para asegurarse de que la imagen aún se vea bien en los dispositivos de retina sin reducir los tiempos de carga, recomiendo dimensionarla a 1920 px por 1221 px en Photoshop o algún otro software de edición de imágenes.
Implementando el Diseño con Divi
El diseño que crearemos hoy se puede adaptar a cualquier banda o género. ¿Estás construyendo un sitio para una banda pop japonesa? Considere sustituir un fondo con lindos emojis por la imagen inspirada en Hitchcock que usé aquí.
El diseño también se puede utilizar para mostrar otros tipos de medios de audio. Si ejecuta un podcast, por ejemplo, cargue su último episodio, escriba una biografía ingeniosa e incluya un enlace a su blog en el área de llamada a la acción. En última instancia, es un concepto versátil, diseñado para proporcionar a los usuarios un poco de contexto mientras escuchan su MP3.
La arquitectura de este diseño es bastante sencilla. Se compone de una sola sección, que contiene una sola fila. Asegúrese de establecer el diseño de la fila en la selección ⅓ – ⅓ – ⅓, ¡lo cual probablemente sea obvio dado el título de este tutorial! Finalmente, cada una de las columnas tendrá uno de los tres módulos: un módulo de audio, un módulo de texto y un módulo de llamada a la acción. El orden no importa; siéntete libre de organizarlos como mejor te parezca.
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 siniestra que usé aquí , pero también puedes buscar en un sitio gratuito de fotografías de archivo como Pexels o Unsplash para encontrar una que se adapte mejor a tu propia estética).
En la pestaña Configuración general de la Configuración de la sección, seleccione la foto que desea usar de la carpeta Descargas local de su computadora y cárguela.
Configuración de fila
Ahora que tenemos el fondo de la sección configurado, es hora de personalizar la fila de tres columnas. Comience abriendo la ventana Configuración de fila. En la pestaña Configuración general, cambie el botón junto a «Hacer esta fila de ancho completo» a «Sí». Esto permitirá que nuestra fila se extienda a lo largo de nuestra ventana gráfica, dándonos mucho espacio para incluir tres módulos.
Sin embargo, hay algunas personalizaciones adicionales que tendremos que hacer en la fila antes de poder pasar a los módulos. Vaya a la pestaña Configuración de diseño avanzada y, dejando el fondo de la fila en blanco, desplácese hacia abajo hasta «Ecualizar alturas de columna» y cambie el botón a «Sí».
¿Recuerdas que decidimos dejar el color de fondo de la fila en blanco? Eso es porque le daremos a cada una de las columnas su propio color de fondo. Dentro de la pestaña Configuración avanzada de diseño, desplácese hacia abajo hasta que llegue a la configuración de color de fondo respectiva de las columnas 1, 2 y 3. Como puede ver, utilicé los valores rgba de (0,0,0, .66), configurando intencionalmente mi valor alfa para reflejar la naturaleza demoníaca de mi banda ficticia. Este es otro caso en el que es posible que desee seleccionar una paleta de colores diferente (usando los controles deslizantes de tono y opacidad) según la marca o la estética que está tratando de cultivar.
Las personalizaciones finales que realizaremos en las columnas se encuentran en la pestaña CSS personalizado. Para replicar las esquinas sutiles y redondeadas de las columnas, pegue el siguiente CSS en los campos de texto del elemento principal para cada uno (elemento principal de la columna 1, elemento principal de la columna 2 y elemento principal de la columna 3).
|
01
|
border-radius: 5px; |
Configuración del módulo de audio
Elegí comenzar insertando un módulo de audio en la primera columna de mi fila, pero puede comenzar con el módulo que prefiera. A continuación, abra la ventana Configuración del módulo de audio y, en la pestaña Configuración general, cargue su archivo MP3 e ingrese los datos relevantes, como el título de la canción, el nombre del artista y el nombre del álbum.
A continuación, queremos agregar algo de estilo navegando a la pestaña Configuración de diseño avanzada. Recuerde, ya logramos algunos estilos en Configuración de fila, como seleccionar un color de fondo y redondear los bordes de la columna contenedora. Aquí, evite establecer un color de fondo o asegúrese de que la opacidad sea 0. (No queremos que nada interfiera con el color de fondo de la columna).
Como puede ver, decidí ajustar mi tipografía para aumentar el «factor de fluencia» de mi diseño. Elegí la fuente macabra Covered by your Grace, con un tamaño de 31 px, pero puedes buscar en la biblioteca para encontrar una que se adapte mejor a tu diseño.
Finalmente, manteniéndose dentro de la pestaña Configuración de diseño avanzada, desplácese hacia abajo hasta la sección denominada «Márgenes personalizados». Establezca el margen superior en 30 px. Esto empuja su reproductor de audio hacia el centro de la columna.
Configuración del módulo de texto
En la columna central, inserte un módulo de texto. Elegí usar este campo de texto para una breve biografía sobre HarmOni, pero puede incluir cualquier contenido relevante para su diseño. Si está mostrando un episodio de podcast, por ejemplo, es posible que desee escribir un breve resumen.
Después de insertar el módulo, abra la ventana Configuración del módulo de texto y, en la pestaña Configuración general, escriba, o pegue, el texto que desea mostrar. Encima del cuadro de entrada de texto, tiene la opción de cambiar la justificación de su texto; Lo centré.
Notará que, de manera predeterminada, su texto se empuja hasta los bordes de los límites de la columna. Para ajustar esto, vaya a la pestaña Configuración de diseño avanzada y desplácese hacia abajo hasta la sección titulada «Márgenes personalizados». Usé 20 px para mis márgenes superior e inferior y 50 px para mis márgenes izquierdo y derecho.
También notarás que elegí diseñar mi texto, usando mayúsculas, porque parecía el tipo de elección de diseño que te gritaría que haría una banda de heavy metal.
Configuración del módulo de llamada a la acción
Por último, debemos insertar un módulo de llamado a la acción en la última columna de nuestra fila para alentar a los visitantes a descargar su música o episodio. En la ventana Configuración general, ingrese el título que desea usar; Elegí «Estamos en GooglePlay». Sin embargo, como también quería agregar un apéndice sarcástico («a pesar de que estamos en contra del sistema»), me desplacé un poco más hacia abajo hasta el campo de entrada de texto, donde escribí mi mensaje.
Mientras se encuentra en la pestaña Configuración general, no olvide agregar la URL a la que se vinculará su botón, además del texto que aparecerá en el botón mismo. Sin esta información, no aparecerá ningún botón en su página.
Como antes, también me aseguré de que la opción de incluir un color de fondo no estuviera seleccionada.
También hay algunos ajustes en el diseño del módulo de llamado a la acción que necesitaremos hacer en la pestaña Configuración de diseño avanzado. Primero, elegí que la fuente del encabezado imitara la que usé para el título de la canción. A continuación, al igual que con el módulo de audio, agregué un Margen personalizado: 10 px en la parte superior.
Por último, justo después del campo para personalizar los márgenes, busque la sección titulada «Usar estilos personalizados para el botón». Cuando cambia la opción a «Sí», aparecen opciones de personalización adicionales. Puedes diseñar el botón CTA como quieras, pero decidí adherirme al blanco fantasmal predeterminado, con una excepción. Seleccioné un ícono personalizado, una nota musical, para que apareciera al pasar el mouse.
Cuando haya terminado, presione «Guardar y salir» para ver su obra maestra.
Ahora que ha terminado, desplácese hacia arriba y compare el diseño de su reproductor de audio de tres partes con el módulo de audio predeterminado y aprecie el nivel de personalización que es posible con solo unos pocos ajustes y un toque de CSS.
¡Gracias por seguir mi serie de módulos de audio!
Ha sido genial compartir algunos tutoriales con todos ustedes y espero compartir más en el futuro. Estén atentos a nuestra próxima miniserie Divi, a partir del lunes. Es de otro nuevo colaborador del blog Elegant Themes, John Donnellon, en el módulo Divi Post Slider. En él, tomará cinco diseños de controles deslizantes de blogs populares en la web y le mostrará cómo volver a crearlos con Divi.
¡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!