Cómo crear un módulo Divi fluido receptivo

Para simplificar aún más el proceso de implementación de un diseño receptivo consistente para un módulo Divi, podemos aplicar las prácticas del diseño web fluido. A diferencia de los métodos más tradicionales de diseño receptivo, el diseño web fluido no se rompe ni salta abruptamente a un tamaño / estilo diferente en diferentes puntos de interrupción. Incorpora unidades de longitud sensibles en relación con el ancho de la ventana de visualización para que el diseño se ajuste (o escale) de manera fluida, manteniendo el diseño consistente en todos los dispositivos.

En este tutorial, le mostraremos cómo crear un módulo Divi fluido. Usando prácticas de diseño fluido similares para crear una tipografía fluida y / o botones fluidos, vamos a crear un módulo Divi fluido que se escalará sin problemas con la ventana del navegador. Como descubriremos, la combinación secreta es agregar un tamaño de fuente del cuerpo raíz con una unidad de longitud relativa (o fluida) al módulo y luego incorporar la unidad de longitud em (que es relativa al tamaño de fuente del cuerpo raíz) en todo el módulo. ajustes cuando sea necesario.

¡Empecemos!

Vistazo

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

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

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.

Descarga los archivos

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.

DESCARGAR

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:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá 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 regular predeterminada.

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

• Usar ancho de canalón personalizado: SÍ
• Ancho de la canaleta: 1
• Ancho: auto
• Ancho máximo: 100%
• Acolchado: 5vw superior, 5vw inferior

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

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 llamado 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

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

Al diseñar un módulo fluido, necesitamos agregar un tamaño de fuente raíz fluido 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 raíz fluido al módulo, vaya a la pestaña avanzada y agregue el siguiente CSS personalizado al elemento principal:

font-size: clamp(16px, 2vw, 24px);

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.

Reemplazo de cualquier elemento con espaciado predeterminado con valores de unidad de longitud em

Aunque no sea absolutamente necesario, para obtener un diseño realmente fluido para el módulo, necesitamos anular cualquier espacio predeterminado (detrás de escena) que el módulo esté usando actualmente con un valor de unidad de longitud em para esa propiedad. Puede identificarlos inspeccionando su elemento utilizando herramientas de desarrollo de navegadores. En este caso, el módulo de llamada a la acción tiene un relleno en la parte 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íxeles (px), necesitamos 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 raíz fluido para el módulo está en su lugar, todo lo que necesitamos 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 utilice la unidad de longitud em heredará la fluidez del tamaño de fuente y se 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 crea a propósito teniendo en cuenta el texto del cuerpo. Por lo tanto, podemos asignar al texto del cuerpo 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 del cuerpo. Para hacer esto, actualice lo siguiente:

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

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.7em
• Altura de la línea de título: 1.3em

Para darle una idea de cuál será realmente el tamaño del texto del título, simplemente multiplicamos el valor de 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 (16 px), fluido (2vw) y máximo (24 px). Por lo tanto, el tamaño mínimo del texto del título será 1,7 veces 16 píxeles, lo que se aproxima a los 27,2 píxeles. El tamaño de fuente fluido será 1,7 veces 2vw (2% del ancho de la ventana gráfica). Y el tamaño máximo de fuente 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 de unidad de longitud em para incorporar el diseño fluido también.
Actualice la siguiente configuración de botones:

• Tamaño del texto del botón: 1.3em
• Ancho del borde del botón: 0.12em
• Radio del borde del botón: 1.5em
• Espaciado de letras de botones: 0.1em
• Acolchado de botones: 0.1em en la parte superior, 0.1em en la parte inferior, 2em a la izquierda, 2em a la derecha

Tamaño y espaciado

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

Actualice las siguientes configuraciones de tamaño y espaciado:

• Ancho máximo: 40em
• Altura mínima: 0vw
• Margen: 0.5em superior, 0.5em inferior, izquierda automática, derecha automática
• Acolchado: 2.5em superior, 2.5em inferior, 2em izquierdo, 2em derecho

El resultado

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

Agregar 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 ni 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 adapte al 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 teniendo 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, necesitamos 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.5em a la izquierda, 0.5em a la derecha

Módulo duplicado

Ahora duplica 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:

display:grid;
grid-template-columns: auto auto;
justify-content:center;

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

display:grid;
grid-template-columns: auto;
justify-content:center;

Esto establecerá 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 el (los) módulo (s) fluido (s) están completos, puede actualizar los estilos del módulo utilizando la configuración de diseño incorporada 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 tener noticias tuyas en los comentarios.

¡Salud!