Todo lo que necesitas saber sobre los grupos de módulos Divi 5

Divi 5 mejora la creación del sitio web con nuevas características y flexibilidad incomparable. Los grupos de módulos son una de las adiciones más recientes a Divi 5. Esta característica le permite organizar múltiples elementos en un solo grupo manejable que puede diseñar, mover o duplicar con un solo clic. Esta característica se vuelve particularmente útil una vez que se lanzan las próximas funciones como FlexBox y el consultorio de la Query Loop Builder.

En esta publicación, exploraremos todo lo que necesita saber sobre los grupos de módulos de Divi 5. Desde la comprensión de lo que son y por qué son importantes hasta aprender a usarlos de manera efectiva, lo tenemos cubierto.

Nota: Divi 5 está listo para usarse en nuevos sitios web, pero aún no recomendamos convertir los sitios existentes en Divi 5.

Exploremos lo que es posible con los grupos de módulos.

¿Qué son los grupos de módulos?

Los grupos de módulos son un nuevo elemento contenedor que le permite agrupar múltiples módulos en una sola unidad cohesiva dentro de una columna. Una vez agrupados, los módulos pueden diseñarse, duplicarse o reposicionarse juntos, aumentar su flujo de trabajo y garantizar la consistencia en su diseño. Los grupos de módulos mantienen sus módulos perfectamente empaquetados, lo que hace que sean más fáciles de manejar colectivamente.

Los grupos de módulos ofrecen una ventaja organizacional significativa. Por ejemplo, si tiene una columna con un encabezado, un módulo de texto y un botón, agruparlos le permite aplicar un fondo unificado, ajustar el espacio o mover toda la composición con una sola acción. Esto ahorra tiempo y reduce el riesgo de diseños inconsistentes, lo que hace que los grupos de módulos sean una herramienta esencial para crear fácilmente diseños profesionales pulidos.

Por qué los grupos de módulos importan

Los grupos de módulos en Divi 5 son más que una característica conveniente: introducen una nueva capa de control y eficiencia. Permiten a los diseñadores y desarrolladores crear con mayor precisión y creatividad. He aquí por qué tienen el potencial de tener un gran impacto en cómo diseñar sitios web con Divi.

1. Son parte del futuro de Divi: los grupos de módulos están construidos con la arquitectura de pensamiento a futuro de Divi 5 en mente. Están preparados para las próximas funciones como Flexbox y el consultor de la consulta, lo que hará que la creación de diseños dinámicos sea muy fácil. Invertir en grupos de módulos ahora lo prepara para el éxito a largo plazo, especialmente a medida que Divi 5 evoluciona.
2. Ahorran tiempo: con los grupos de módulos, no tiene que lidiar con ediciones repetitivas. Puede peinar, reposicionar o duplicar diseños complejos en una acción, reduciendo significativamente el tiempo de diseño. Los preajustes para grupos de módulos llevan esto más allá al permitirle guardar y aplicar configuraciones predefinidas al instante.
3. Promueven la consistencia del diseño: los grupos de módulos le permiten garantizar que cada elemento del grupo, desde los botones hasta el texto, siga las mismas reglas de estilo. Para aquellos que administran sitios de marca, los grupos de módulos pueden mantener los diseños pulidos y profesionales en todo su sitio.
4. Más libertad creativa: los grupos de módulos te permiten experimentar sin tener que editar cada elemento individualmente. Puede crear diseños destacados con facilidad, incluso si eres nuevo en Divi. La combinación de filas anidadas y grupos de módulos puede ayudarlo a desbloquear contenedores infinitamente nido.

Ya sea que sea un diseñador individual o propietario de un negocio, los grupos de módulos ofrecen el control y la eficiencia que necesita para elevar sus proyectos.

Cómo usar grupos de módulos en Divi 5

Comenzar con grupos de módulos es fácil. Agregue una nueva fila a una página en Divi 5 y seleccione el diseño de 3 columnas.

En Divi 5, notará un nuevo módulo de grupo . Haga clic para agregarlo a la primera columna.

A partir de ahí, puede agregar cualquier módulo que desee construir un diseño reutilizable. Para demostrar, crearemos un grupo de módulos para un servicio destacado. Comience con agregar una fila anidada de 2 columnas al grupo de módulos.

En la primera columna de la fila anidada, agregue un módulo de imagen .

En la segunda columna de la fila anidada, agregue un módulo de encabezado y enséñelo como desee.

A continuación, agregue una fila anidada de una sola columna , seguida de otro rumbo, texto y módulos de botones. Una vez agregado, su diseño debe parecer similar a la imagen a continuación.

Los grupos de módulos se pueden diseñar como un solo módulo, agregar colores de fondo o gradientes, ajustar el espacio o agregar efectos de borde. También puede guardar su grupo de módulos como preajuste accediendo a la configuración del grupo de módulos, haciendo clic en la opción Preset y guardando la configuración. Este preajuste se puede aplicar a otros grupos de módulos con un solo clic, asegurando un estilo y estructura idénticos en su sitio o múltiples proyectos. Una vez que cree un grupo de módulos, puede duplicarlo, guardarlo en Divi Cloud o reutilizar su preajuste en sus sitios web.

Casos de uso práctico para grupos de módulos

Los grupos de módulos en Divi 5 son excelentes para construir sitios web profesionales y eficientes. Bundling módulos en unidades reutilizables y de estilo ahorra tiempo y eleva sus diseños a nuevas alturas. Ya sea construyendo una página de destino o administrar una cartera de sitios de clientes, los grupos de módulos hacen que los diseños complejos se sientan sin esfuerzo. Aquí hay algunos casos de uso prácticos que muestran su potencia y racionalizan el proceso de diseño.

1. Caso de uso futuro: publicaciones y productos

Los grupos de módulos están construidos para brillar con el próximo bucle de bucle de Divi 5. Prepárese ahora agrupando elementos para diseños dinámicos, como vistas previas de publicaciones de blog o listados de productos de WooCommerce. Una vez que llega Loop Builder, estos grupos llenarán contenido dinámico sin esfuerzo, ahorranle tiempo y garantizando diseños impecables y escalables.

2. Llamar a las secciones de acción

Grupo un titular audaz, un subtítulo persuasivo y un botón vibrante con un efecto desplegado para crear CTA reutilizables. ¿Necesita el mismo CTA en varias páginas? Duplique el grupo en segundos o guárdelo en Divi Cloud para acceso instantáneo. Esto reduce el tiempo de configuración al tiempo que se alinea cada CTA con la apariencia de su marca.

3. Secciones testimoniales

Combine la cita, la imagen y el nombre de un cliente en un solo grupo de módulos para diseños testimoniales profesionales consistentes. Arrastre el grupo para reorganizar las secciones o aplique un estilo unificado, como esquinas redondeadas o una sombra sutil, en un solo clic.

4. Categorías de productos

Los grupos de módulos pueden ser perfectos para exhibir categorías de productos. Por ejemplo, cree un grupo para resaltar el número de productos en una categoría, un título, imagen y botón, luego duplicarlo para otras categorías. Este enfoque garantiza la consistencia visual en las páginas de productos y acelera el diseño para los sitios web de comercio electrónico.

5. Menús del restaurante

Otra excelente manera de usar grupos de módulos es para sitios web que necesitan presentar un menú. Estructurar el texto dinámicamente puede llevar mucho tiempo, por lo que usar grupos de módulos es perfecto para acelerar el proceso. Puede combinar grupos y filas anidadas para que una sección se vea increíble y fácil de duplicar en el futuro.

Grupos de módulos en el contexto de Divi 5

Divi 5 es un salto audaz para el diseño de WordPress, priorizando el rendimiento rápido, la flexibilidad y las características innovadoras como los grupos de módulos. Construido sobre la arquitectura moderna, Divi 5 le permite crear sitios web que sean tan eficientes como hermosos. Los grupos de módulos son una piedra angular de esta visión, integrándose sin problemas con otras características de Divi 5 para aumentar su flujo de trabajo. A medida que Divi 5 evoluciona en su fase alfa pública con actualizaciones quincenales, los grupos de módulos están listos para redefinir cómo se construye. Así es como encajan en el panorama general.

Filas anidadas

Los grupos de módulos de pares con anidación de la hilera infinita de Divi 5 para crear diseños complejos y organizados. Por ejemplo, el titular del grupo A, la imagen y el botón con una fila anidada para construir secciones como tablas de precios o exhibiciones de miembros del equipo.

Variables de diseño

Puede mantener la consistencia del diseño aplicando valores de estilo reutilizables en grupos de módulos, como colores de marca, fuentes o cálculos de sujeción (). Puede actualizar una variable una vez, y cada grupo refleja el cambio al instante, lo que los hace perfectos para proyectos a gran escala.

Unidades avanzadas

Puede usar unidades CSS REM, EM, VW, VH u otros para construir un espaciado y dimensionamiento receptivo para grupos de módulos. Esto garantiza que los elementos agrupados se vean impresionantes en cada dispositivo, desde escritorios hasta teléfonos inteligentes.

Consejos para maximizar grupos de módulos

Para aprovechar al máximo los grupos de módulos, algunas estrategias inteligentes pueden llevar su poder de diseño al siguiente nivel. Aquí le mostramos cómo hacer que trabajen más duro para usted.

1. Planifique sus diseños: antes de agrupar los módulos, dibuje la estructura de su sección o use una herramienta de creación de prototipos para ayudarlo a planificar los elementos que desea usar. Esta planificación inicial evita el trabajo adicional y garantiza que sus grupos sean lógicos y reutilizables.
2. Utilice Divi Cloud: guarde sus grupos de módulos favoritos en Divi Cloud para convertirlos en activos de proyectos cruzados. Por ejemplo, puede guardar un grupo de miembros del equipo pulido y llevarlo a cualquier sitio con unos pocos clics.
3. Capacidad de respuesta de prueba con puntos de interrupción: use los puntos de interrupción personalizables de Divi 5 para garantizar que sus grupos de módulos se vean impecables en cada dispositivo. Ajuste el espaciado o los tamaños de fuente para dispositivos móviles dentro de la configuración del grupo para evitar ajustes manuales.
4. Utilice variables de diseño: para agregar cohesión a sus diseños, establecer variables de diseño para colores, texto, fuentes o reglas numéricas (como cálculos de Clamp ()) para facilitar los pequeños cambios.
5. Sea creativo con el estilo: experimente con efectos audaces como animaciones flotantes o transiciones sincronizadas dentro de los grupos de módulos. Por ejemplo, agregue un efecto de escala a un botón y imagen agrupados para un CTA dinámico.
6. Experimente con Divi 5: el alfa público de Divi 5 es su patio de recreo: construya un sitio de prueba para explorar grupos de módulos. Intente agrupar diferentes combinaciones de módulos o probar nuevas ideas de estilo para descubrir lo que es posible.

Diseñe más inteligente con grupos de módulos en Divi 5

Los grupos de módulos de Divi 5 simplifican su flujo de trabajo, asegurando la consistencia del diseño y preparándolo para el futuro de los diseños dinámicos. Ya sea que se agrupe elementos de diseño para un CTA reutilizable, creando secciones testimoniales cohesivas o experimentando con un estilo en negrita, los grupos de módulos le permiten trabajar de manera más inteligente y crear sitios web más rápido. A medida que Divi 5 evoluciona, esta característica le permite crear sitios web eficientes y hermosos.

Comience a experimentar con grupos de módulos en el Alpha público de Divi 5 y experimente una nueva forma de construir sitios web con Divi. Como se señaló anteriormente, Divi 5 está listo para nuevos sitios web, pero todavía no lo recomendamos para los sitios existentes.

Le recomendamos que se una a la comunidad Divi para compartir las creaciones de su grupo de módulos. Publique sus diseños en el grupo de Facebook de Divi o etiqueta @elegantthemes en X.

¡Construyamos algo increíble juntos!