Esta publicación es la parte 4 de 5 de nuestra miniserie 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!
Hoy, vamos a crear un diseño de pantalla dividida: un lado sostendrá el módulo de audio, mientras que el otro lado albergará un módulo de testimonios, donde puede compartir elogios críticos de su trabajo. El nombre del diseño, Tints n’ Shades, proviene del sutil contraste que crearemos usando configuraciones simples de opacidad. Simplemente siga el tutorial que he descrito a continuación para replicar este diseño limpio. ¡Asegúrese de dejar cualquier comentario en la sección de comentarios a continuación!
Como diseñador, siempre es importante comprender los componentes básicos de su producto final. Por esta razón, comenzaremos examinando el módulo de audio básico con el estilo predeterminado de Divi.
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:
Como puede ver, elegí el tema de mi diseño en torno a una banda ficticia llamada The Spectrum, utilizando sutiles alusiones al Mago de Oz . Puede sustituir mis activos de diseño (por ejemplo, la foto de fondo) por aquellos que capturen mejor su propia marca.
Título de la publicación como encabezado
Suscríbete a nuestro canal de Youtube
El concepto y la inspiración
Algunos sitios web están tan repletos de ventanas emergentes y botones de llamada a la acción que pueden resultar francamente molestos para navegar. Para este diseño, quería rebelarme contra esa estética, con un concepto aireado y minimalista, dejando mucho espacio para respirar alrededor de los elementos más importantes de la página. La imagen de la nube fue una elección natural para comunicar amplitud.
Preparación de los elementos de diseño
Lo crea o no, este diseño solo requiere un activo de imagen, a pesar de la apariencia de dos colores. Descargué una foto de nubes de Unsplash, una que tenía un buen equilibrio y unas cuantas nubes bastante homogéneas. Puedes encontrarlo aquí . Recomiendo reducir el tamaño un poco; Unsplash proporciona fotos de muy alta resolución que invariablemente ralentizan el tiempo de carga. Para garantizar que la imagen aún se vea bien en los dispositivos retina, recomiendo reducir su tamaño a 1920 px por 1310 px en Photoshop o algún otro software de edición de imágenes.
Implementando el Diseño con Divi
Este diseño es increíblemente versátil; Con unos pocos cambios en las imágenes y la tipografía, puedes pasar de un tranquilo paisaje de nubes a una frenética página de inicio de EDM en segundos. Los elementos clave a incluir son el módulo de audio, para que pueda reproducir su MP3, y el módulo de testimonios, para que pueda compartir los comentarios de la audiencia con los visitantes de su sitio web.
La arquitectura de este diseño es bastante sencilla. Se compone de una sola sección, que contiene una sola fila, dividida en dos partes iguales. Esa fila se convierte en el contenedor de nuestros módulos de audio y testimonios.
Ajustes de sección
Ahora que ha estructurado su diseño, querrá comenzar a personalizar cada componente. Comience con la Configuración de la sección, cargando una foto de fondo. (Puedes encontrar la foto de la nube que usé aquí , pero también puedes navegar por un sitio gratuito de fotografías de stock como Pexels o Unsplash para encontrar uno que se adapte mejor a tu marca).
En la pestaña Configuración general de la ventana Configuración de la sección, seleccione la foto que desea usar de la carpeta Descargas local de su computadora y cárguela.
A continuación, aún dentro de la pestaña Configuración general, desplácese hacia abajo hasta que llegue a los cuadros de entrada de relleno personalizados. Establezca cada uno de estos en 0px. Esto ayudará a lograr el efecto de pantalla completa que ve en el producto terminado.
Configuración de fila
Ahora que tenemos el fondo de la sección configurado, es hora de personalizar la fila de columna dividida. 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 nuestros módulos de audio y testimonios.
A continuación, queremos eliminar el espacio entre las dos columnas, llamado «canalón». Para hacer esto, cambie el control deslizante junto a «Usar ancho de canalón personalizado» a sí. Luego, usando el control deslizante debajo del botón, establezca el valor en 0px.
Finalmente, al igual que con la sección, desplácese hacia abajo hasta los cuadros de entrada de relleno personalizado y establezca cada uno en 0px. Esto nuevamente nos ayudará a lograr el diseño de pantalla completa.
A continuación, vaya a la pestaña Configuración de diseño avanzada para obtener algunas personalizaciones más. Comenzando con los campos de Margen personalizado, establezca los márgenes Superior e Inferior en 0px. Ahora, desplácese hacia abajo hasta la sección titulada «Ecualizar alturas de columna» y cambie el control deslizante a «sí».
Finalmente, es hora de agregar los componentes homónimos de nuestro diseño: el tinte y la sombra. Comenzaremos configurando el color de fondo de la primera columna en un gris oscuro con valores rbga de (12,12,12,0.34). Por supuesto, puede elegir su propia combinación, o incluso el color, utilizando los controles deslizantes de tono y opacidad.
A continuación, desplácese hacia abajo hasta el color de fondo de la columna 2. Esta será nuestra mitad «teñida» del diseño. Usé un valor rgba de (255,255,255,0.7).
Guarde y salga, ¡y acceda a la configuración del módulo!
Configuración del módulo de audio
Comencemos por personalizar nuestro módulo de audio. Elegí insertarlo en la columna de la izquierda, pero también puedes ponerlo en el lado derecho. (Los módulos se apilarán en el dispositivo móvil). En la pestaña Configuración general de la ventana Configuración del módulo de audio, cargue su MP3 (sin él, no aparecerán los controles del reproductor) y escriba los detalles relevantes: título de la canción, nombre del artista y nombre del álbum. .
A continuación, vaya a la pestaña Configuración de diseño avanzada y asegúrese de que no tiene un conjunto de colores de fondo; queremos asegurarnos de que los colores de fondo de las columnas que establecimos anteriormente ocupen un lugar central. Aprovecha también esta oportunidad para personalizar tu tipografía. Elija una fuente que capture la estética de su banda; Elegí Crafty Girls porque era divertido y algo caprichoso.
Finalmente, desplácese hasta la parte inferior de la pestaña Configuración de diseño avanzada y dele a su módulo de audio un margen superior de 20px.
Configuración del módulo de testimonios
Por último, debemos insertar el módulo de testimonios en la otra columna de nuestra fila. Comience abriendo la ventana Configuración del módulo de testimonios y, en la pestaña Configuración general, complete los campos de texto correspondientes. Elegí solo proporcionar el nombre, la empresa y el cargo del crítico, pero siéntase libre de cargar una imagen de perfil e incluir un enlace a un sitio web externo.
Desplazándose hacia abajo un poco más, establezca el color de su texto en «oscuro» para que pueda leerse fácilmente en nuestro fondo teñido. También notará que deshabilité el ícono de cotización porque quería mantener un diseño limpio y minimalista. Nuevamente, asegúrese de haber deshabilitado el color de fondo del módulo de testimonios.
Ahora, el componente más importante del módulo de testimonios: ¡el contenido! En el cuadro de texto grande, escriba los elogios que se le han otorgado a su última pista.
A continuación, haga clic en Configuración avanzada de diseño. Desplácese hasta la parte inferior de la ventana y establezca cada margen personalizado en 50 px. Esto le dará un respiro al contenido de nuestro módulo de testimonios.
Para un toque final, navegue a la pestaña CSS personalizado y, en la sección Autor del testimonio, agregue lo siguiente:
|
01
|
font-family: "Pacifico"; |
Este es un paso opcional, pero pensé que era un buen detalle cambiar la fuente del nombre del crítico. Elegí Pacifico, pero puedes sustituir cualquier fuente que quieras; simplemente pegue el nombre de la fuente entre comillas en el fragmento de código anterior.
Haga clic en Guardar y salir, ¡y listo! Ha creado un diseño limpio y aireado de pantalla dividida, perfecto para compartir sus últimas canciones.
Mañana: Título de la publicación
¡Ú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 módulo de audio inspirado en el heavy metal con espacio para una biografía de la banda, un reproductor de música y un botón de descarga!
¡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!