Cómo crear un módulo Divi fluido receptivo

Vistazo

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

Y aquí hay un codepen que demuestra la funcionalidad de este módulo fluido.

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.

Cómo crear un módulo Divi fluido receptivo

La fila

Para comenzar, cree una nueva fila de una columna dentro de la sección normal predeterminada.

Abra la configuración de la fila y actualice lo siguiente: 

• Usar ancho de canalón personalizado: SÍ
• Ancho del canalón: 1
• Ancho: automático
• Ancho máximo: 100%
• Acolchado: 5vw arriba, 5vw abajo

Diseño de un módulo de llamada a la acción fluida

Aunque las mismas técnicas de diseño fluido se pueden agregar a casi cualquier módulo Divi, vamos a uno de los módulos de llamada a la acción de Divi para este tutorial.

Agregue un nuevo módulo de llamada a la acción dentro de la columna/fila.

Configuración de contenido

En la configuración de contenido, agregue una URL de enlace de botón simulado y actualice el color de fondo de la siguiente manera:

• URL del enlace del botón: #
• Color de fondo: #5e6472

Adición de un tamaño de fuente de raíz fluida al módulo

Al diseñar un módulo fluido, debemos agregar un tamaño de fuente de raíz fluida al módulo. Una vez que se agrega al módulo, este tamaño de fuente raíz se incorporará dinámicamente en el resto de las configuraciones de diseño de nuestro módulo utilizando la unidad de longitud em.

Para agregar el tamaño de fuente de raíz fluida al módulo, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado al elemento principal:

Para este tamaño de fuente, estamos usando la función CSS Clamp() para establecer un tamaño de fuente mínimo, un tamaño de fuente fluido (cuando sea necesario) y un tamaño de fuente máximo.

 

Anulación de cualquier elemento con espaciado predeterminado con valores de unidad de longitud em

Aunque no es absolutamente necesario, para obtener un diseño realmente fluido para el módulo, debemos anular cualquier espacio predeterminado (entre bastidores) que el módulo esté usando actualmente con un valor de unidad de longitud em para esa propiedad. Puede identificarlos inspeccionando su elemento utilizando las herramientas de desarrollo de un navegador. En este caso, el módulo de llamada a la acción tiene un relleno inferior tanto en la descripción de la promoción como en el elemento del título de la promoción. Dado que la propiedad de relleno inferior usa una unidad de longitud de píxel (px), debemos anular cada una con una unidad de longitud em que incorporará el tamaño de fuente del cuerpo raíz que acabamos de agregar al elemento principal.
 

Actualización del diseño con unidades de longitud em

Ahora que nuestro tamaño de fuente de raíz fluida para el módulo está en su lugar, todo lo que tenemos que hacer es actualizar el diseño del módulo usando unidades de longitud em. Debido a que la unidad de longitud em es relativa al tamaño de fuente raíz, cualquier diseño que use la unidad de longitud em heredará la fluidez del tamaño de fuente y escalará de manera fluida con el tamaño de fuente cuando sea necesario.

Cuerpo de texto

El tamaño de fuente raíz personalizado que agregamos anteriormente se creó a propósito teniendo en cuenta el texto del cuerpo. Por lo tanto, podemos asignar el cuerpo del texto con un valor de 1em que hereda el valor exacto del tamaño de fuente raíz. También podemos agregar una altura de línea de cuerpo. Para hacer esto, actualice lo siguiente:

• Tamaño del cuerpo del texto: 1em
• Altura de la línea del cuerpo: 1,8 em

 

Texto del título

Para el elemento de texto del título del módulo, podemos darle un tamaño más grande usando la unidad de longitud em. Actualice lo siguiente:

• Tamaño del texto del título: 1,7 em
• Altura de la línea del título: 1,3 em

 


Para darle una idea de cuál será realmente el tamaño del texto del título, simplemente multiplicamos el valor de la longitud em por el valor de la fuente raíz. Recuerde, el tamaño de fuente raíz usa clamp() para establecer un tamaño de fuente mínimo (16px), fluido (2vw) y máximo (24px). Por lo tanto, el tamaño mínimo del texto del título será 1,7 veces 16 px, que está cerca de 27,2 px. El tamaño de fuente fluido será 1,7 veces 2vw (2 % del ancho de la ventana gráfica). Y el tamaño de fuente máximo será 1,7 veces 24 px, que está cerca de 69,36 px.

Diseño de botones

El tercer elemento del módulo es el botón. Podemos actualizar la configuración de diseño del botón utilizando valores unitarios de longitud em para incorporar también el diseño fluido.

Actualice la siguiente configuración de botones:

• Tamaño del texto del botón: 1,3 em
• Ancho del borde del botón: 0,12 em
• Radio del borde del botón: 1,5 em
• Espaciado entre letras de botones: 0,1 em
• Relleno del botón: 0,1 em arriba, 0,1 em abajo, 2 em izquierda, 2 em derecha

Tamaño y espaciado

Para asegurarnos de que el módulo tenga un tamaño fluido y un espacio fluido, también debemos usar unidades de longitud em para esos valores.

Actualice la siguiente configuración de tamaño y espaciado:

• Ancho máximo: 40em
• Altura mínima: 0vw
• Margen: 0,5 em superior, 0,5 em inferior, automático a la izquierda, automático a la derecha
• Relleno: 2,5 em arriba, 2,5 em abajo, 2 em izquierda, 2 em derecha

El resultado

Ahora veamos el resultado de nuestro módulo fluido al ajustar el ancho del navegador en una página en vivo.

 

Adición de varios módulos de fluidos en una fila con CSS Grid

Para agregar varios módulos de fluidos adyacentes a una fila, debemos asegurarnos de que el diseño de nuestro módulo de fluidos no esté limitado o detenido por ningún ancho de contenedor principal. En otras palabras, queremos que el contenedor principal de nuestros módulos (la columna) se establezca en automático para que se escale con el tamaño del módulo. Podemos hacer esto usando CSS Grid a nivel de columna para configurar cada uno de los módulos en una cuadrícula con cada columna con un ancho automático.

Ajustar el tamaño y el espaciado del módulo

Antes de crear la cuadrícula CSS para los módulos, debemos ajustar el ancho máximo y el margen de nuestro módulo a un tamaño más adecuado para un diseño de dos columnas con dos módulos.

Abra la configuración del módulo y actualice lo siguiente:

• Alineación de texto: Izquierda
• Ancho máximo: 24em
• Margen: 0,5 em izquierda, 0,5 em derecha

 

Módulo duplicado

Ahora duplique el módulo para crear otro en la misma columna.

Agregar cuadrícula CSS a la columna

Ahora podemos agregar el CSS personalizado a la columna para crear la cuadrícula CSS para los módulos. 

En la pestaña avanzada, agregue el siguiente CSS al elemento principal en la vista de escritorio:

Luego agregue el siguiente CSS al elemento principal en la vista del teléfono:

Esto configurará los dos módulos en una cuadrícula de dos columnas (cada una con un ancho automático) en el escritorio. Luego, en el teléfono, los módulos volverán a una cuadrícula de una columna (ancho automático).

El resultado

Ahora mira el resultado.

Resultados finales

Una vez que los módulos fluidos estén completos, puede actualizar los estilos de los módulos utilizando la configuración de diseño integrada para darle fuentes, colores, etc. personalizados.

Aquí hay un vistazo al resultado final usando una fuente, color de fuente, color de botón y color de fondo diferentes.

Pensamientos finales

Como hemos visto en este tutorial, incorporar un diseño fluido en un módulo Divi puede ser una forma conveniente de garantizar que el módulo se vea hermoso y consistente en todos los tamaños de navegador, sin la molestia de actualizar el diseño en puntos de interrupción específicos.

No olvide consultar nuestros otros artículos sobre diseño fluido, incluida nuestra guía para crear tipografía fluida y botones Divi fluidos.

Espero escuchar de usted en los comentarios.

¡Salud!